App Development
in Python
(11.01.2023)
What we’ll be making:
Logo/Name
Please enter login info
Username
Password
Login
Remember me
1.
Working out the Layout
Logo/Name
Please enter login info
These are “labels”
These are “frames”
Username
This is a “checkbox”
These are
“entryboxes”
Password
This is a “button”
Login
Remember me
See? It’s not too hard!
2. Using the grid to position the components
Column: 0
Outer
Frame
Inner
Frame
Logo/Name
Row: 0
Row: 1
Column: 1
Row: 0
Row: 1
Please enter login info
Username
Row: 2
Row: 3
Password
Row: 4
Row: 5
Login
Remember me
This text is part of
the checkbox so
does not need to
go in a separate
column
3. The package that we’ll be using
CustomTkinter
CustomTkinter is a modified version of the standard Tkinter library included with python by default, which
allows for more modern looking user interfaces than previously possible with the normal Tkinter
Before coding, ensure you run these install commands in your terminal:
on MacOS, Linux & repl.it
“pip install customtkinter”
“pip install packaging”
or on Windows:
“python -m pip install customtkinter”
“python -m pip install packaging”
(Also make sure you have python and pip installed if you are running it locally otherwise it won’t work!)
If you want help using it, then refer to the official documentation:
https://customtkinter.tomschimansky.com/
4. Coding!
Example code:
import customtkinter as ctk
# ------ UI Styling ------ #
ctk.set_appearance_mode("dark")
ctk.set_default_color_theme("dark-blue")
root = ctk.CTk()
root.title("Login example")
root.resizable(0, 0) # Prevent resizing
# Header (text at the top of the window)
title = ctk.CTkLabel(master=root, text="Logo/Name", font=("Roboto", 24, "bold"))
title.grid(row=0, column=0, columnspan=3, pady=10)
# Inner frame
frame = ctk.CTkFrame(master=root)
frame.grid(row=1, column=0, columnspan=3, padx=10, pady=10)
prompt = ctk.CTkLabel(master=frame, text="Please enter login info", font=("Roboto", 12, "bold"))
prompt.grid(row=0, column=0, pady=10)
# Username
username_title = ctk.CTkLabel(master=frame, text="Username", font=("Roboto", 11))
username_title.grid(row=1, column=0)
username_entry = ctk.CTkEntry(master=frame, font=("Roboto", 11, "bold"))
username_entry.grid(row=2, column=0)
# Password
password_title = ctk.CTkLabel(master=frame, text="Password", font=("Roboto", 11))
password_title.grid(row=3, column=0)
password_entry = ctk.CTkEntry(master=frame, font=("Roboto", 11, "bold"), show="*")
password_entry.grid(row=4, column=0)
# Login Button
login_btn = ctk.CTkButton(master=frame, text="Login", font=("Roboto", 14, "bold"))
login_btn.grid(row=5, column=0)
# Remember me checkbox
remember_chkBx = ctk.CTkCheckBox(master=frame, text="Remember me")
remember_chkBx.grid(row=5, column=1, padx=10, pady=10)
# Must be at the end of the code!
root.mainloop()
# Hides entry value with "*"s
5. Result!