Python Tkinter ToDo List (Build Step by Step)

In this Python Tkinter tutorial, let us discuss Python Tkinter ToDo List. We will see, step by step how to build a todo list using Python Tkinter.

  • About Tkinter ToDo List in Python Tkinter
  • Features of ToDo List in Python Tkinter.
  • Code explanation for ToDo list in Python Tkinter.
  • todo list source code with explanation using Python Tkinter

About Tkinter ToDo List in Python Tkinter

  • Python ToDo List is a software that holds information about upcoming tasks or events.
  • Users need a handy software that can be used quickly for taking quick notes. And that is where the to-do list is used.
  • In this tutorial, we will create a simple to-do list application using Python Tkinter that will help users to organize their short notes, messages, or tasks.
  • If we talk about the regular todo list application, then we will notice a text area wherein the user can type message, a button that holds the

Features of ToDo List in Python Tkinter

In this section, we will discuss the features that we are going to add into our to-do application.

  1. Listbox: We will be using Python Tkinter Listbox to show multiple tasks stacked one after another. And tasks can be selected when clicked on it.
  2. Scrollbars: Scrollbars will help us to stack plenty of data without worrying about the space on the window. The Tasks can be accessed by scrolling the Listbox.
  3. Frame: Frame will be used to put widgets like Listbox and Scrollbars inside it. This will give us control to align Listbox to the left & scrollbar to the right so that they both appear parallel & perfect.
  4. Buttons: We will add two button widgets on the window. One is to add more tasks in Listbox and the other is to delete tasks from Listbox.
  5. Entry box: Users will type the task in the entry box which further will be displayed in the Listbox.
  6. Messagebox: The Python Tkinter message box is used to display an error message when the user clicks on the add button with an empty entry box.

Code explanation for ToDo list in Python Tkinter

In this section, we will understand the source code for the ToDo list in Python Tkinter. The entire code is explained in a sequence of creation.

Step 1 : Import Modules

Before we start using Tkinter, we need to call Tkinter for use. so we import the module. Here * means everything. So we are importing everything from Tkinter then in the second line we have imported message box from Tkinter

from tkinter import *
from tkinter import messagebox

Step 2: Create & Configure Window

After importing module, we will create a window so that we can place widgets on it.

  • ws is used to initialize Tk(). From now ws will be called as the parent window. All other widgets will be placed on it.
  • ws.geometry(‘width x height + x-position+ y-position’)
    All the values provided must be integers.
    • the width refers to the horizontal space of the window.
    • height refers to the vertical space of the window.
    • x-position refers to the position of the window on the display over the x-axis.
    • y-position refers to the position of the window on the display over the y-axis.
  • the title will add a title to the window. In our case, we have provided our website name as a title. You can find the title on the top left of the window next to feather.
  • config is used to provide background color to the window.
  • resizable accepts boolean values. Since the boolean values are provided false for both height and width that means the window can’t be resized. To know more about resizable please read our blog on python Tkinter windows size.
  • ws.mainloop() holds the screen so that we can see the window. It is an infinite loop. screen pops up and then disappears but with this infinite loop this process of appearing & disappearing keeps on happening very fast. And we keep on seeing the updated window.
ws = Tk()
ws.geometry('500x450+500+200')
ws.title('PythonGuides')
ws.config(bg='#223441')
ws.resizable(width=False, height=False)

....
....

ws.mainloop()

Step 3: Creating a frame

In this section we will understand why we have used frames as a first widget in our code.

  • Frame widgets are used to hold other widgets.
  • They help in keeping & maintaining user interface (UI) & user experience (UX) clean & organized.
  • Moving forward we will place Listbox, scrollbars & buttons inside the frame.
  • So in this way frame will act as an additional window over the parent window.
  • Another benefit of placing a frame is now we will add scrollbars to the frame and that solves our purpose.
  • Scrollbars are no easy to place but using frames we can do it in no time.
  • pady=10 means we have added extra padding around the frame from outside.
frame = Frame(ws)
frame.pack(pady=10)

Step 4: Adding Listbox

In this section, we will learn why and how we have used Listbox on the window.

  • lb is the variable name for storing Listbox.
  • Listbox is placed on the frame window.
  • width: Horizontal space provided is 25.
  • height: 8 rows in the vertical position are provided.
  • font: Times New Roman font is provided with 14 sizes.
  • bd = 0 refers to the border is zero
  • fg is the foreground color or the text color.
  • highlightthickness=0 every time the focus is moved to any item then it should not show any movement that is value 0 value is provided. by default it has some value.
  • selectbackground it decides the color of the focused item in the Listbox.
  • activestyle=”none” removes the underline that appears when the item is selected or focused.
  • geometry manager used is pack()
  • side=LEFTthis will keep the Listbox to the left side of the frame. We did this on purpose so that we can assign the right position to scrollbars.
  • fill=BOTH this will fill the blank space in both the directions that are x and y
lb = Listbox(
    frame,
    width=25,
    height=8,
    font=('Times', 18),
    bd=0,
    fg='#464646',
    highlightthickness=0,
    selectbackground='#a6a6a6',
    activestyle="none",
    
)
lb.pack(side=LEFT, fill=BOTH)

Step 5: Adding dummy data

  • We have added dummy data so that the application is ready to view. You add or delete whatever data you want.
  • the data is in a list format and is stored in a variable named task_list.
  • for loop is used to insert data in the Listbox.
  • every time loop runs it adds an item to the Listbox & this process keeps on going until all the items in the task_list are inserted.
  • lb.insert(END, item) this command stacks the items in Listbox.
    • lb is the variable used for Listbox
    • insert is a built-in method of Listbox to insert data.
    • END signifies that a new item will be added in the end. If END is replaced with 0 then new data will be added at the top.
    • item is the list item from task_list
task_list = [
    'Eat apple',
    'drink water',
    'go gym',
    'write software',
    'write documentation',
    'take a nap',
    'Learn something',
    'paint canvas'
    ]


for item in task_list:
    lb.insert(END, item)

Step 6: Adding Scrollbars

In this section, we will understand why and how scrollbars are added to the window.

  • Scrollbars are used so that users can scroll the information that is placed in a limited size on the window.
  • In this scrollbars are placed on a frame and the variable assigned is sb
  • The geometry method used is a pack() so that everything remains dynamic and in a sequence.
  • side=RIGHT we have placed scrollbars on the right side of the frame.
  • In the above code, we have provided side=LEFT to Listbox. So in this way, both the widgets are assigned paralleled.
  • fill=BOTH this will fill the blank space in both the directions that are x and y
  • lb.config(yscrollcommand=sb.set) here we have assigned a purpose to the scrollbar. In other words, we have bind Listbox with scrollbar
  • sb.config(command=lb.yview), here yview means scrollbar will go in the vertical direction. If it would have been xview then the scrollbar would have worked in the horizontal direction.
sb = Scrollbar(frame)
sb.pack(side=RIGHT, fill=BOTH)

lb.config(yscrollcommand=sb.set)
sb.config(command=lb.yview)

Step 7: Adding Entry Box

  • Entry box is used to take input from the user.
  • ws: entry box is placed on the parent window
  • font: provides font name i.e ‘Times New Roman’ and size is 14
  • Geometry manager used is pack with padding of 20 outside the widget
my_entry = Entry(
    ws,
    font=('times', 24)
    )

my_entry.pack(pady=20)

Step: 8 Adding another frame for buttons

Frames are used to organise the widgets. We have used separate frame for buttons.

button_frame = Frame(ws)
button_frame.pack(pady=20)

Step 9: Adding Buttons

  • Buttons are placed to trigger some action when pressed.
  • Here we have created two button (addTask & deleteTask). Both of them have same features and look accept the background color and command.
  • Command: When button is clicked the the function mentioned in command is called. In this case if user clicks on addTask_btn button then newTask function is called & when user clicks on the delTask_btn Button then delTask function is called.
addTask_btn = Button(
    button_frame,
    text='Add Task',
    font=('times 14'),
    bg='#c5f776',
    padx=20,
    pady=10,
    command=newTask
)
addTask_btn.pack(fill=BOTH, expand=True, side=LEFT)

delTask_btn = Button(
    button_frame,
    text='Delete Task',
    font=('times 14'),
    bg='#ff8b61',
    padx=20,
    pady=10,
    command=deleteTask
)
delTask_btn.pack(fill=BOTH, expand=True, side=LEFT)

Step 10: newTask() function

  • In this function, we have stored the value of the entry box in the task variable
  • get() method is used to pull the value provided by the user in the entry box.
  • If-else condition is applied to avoid black space entry in the Listbox.
  • if the task does not have blank space then only it will allow it to store the information in the Listbox otherwise it will display a warning message box informing the user that the entry box can’t be empty.
def newTask():
    task = my_entry.get()
    if task != "":
        lb.insert(END, task)
        my_entry.delete(0, "end")
    else:
        messagebox.showwarning("warning", "Please enter some task.")

Step 11: deleteTask() function

  • Here ANCHOR refers to the selected item in the Listbox.
  • lb variable assigned to Listbox
  • delete is a built-in function to delete Listbox item.
  • User will select the item in the Listbox and then to trigger this function he/she will click on the deleteTask button. Immediately the item will disappear from the Listbox.
def deleteTask():
    lb.delete(ANCHOR)

Complete Source Code:

Here is the complete source code for ToDo List in Python Tkinter.

from tkinter import *
from tkinter import messagebox

def newTask():
    task = my_entry.get()
    if task != "":
        lb.insert(END, task)
        my_entry.delete(0, "end")
    else:
        messagebox.showwarning("warning", "Please enter some task.")

def deleteTask():
    lb.delete(ANCHOR)
    
ws = Tk()
ws.geometry('500x450+500+200')
ws.title('PythonGuides')
ws.config(bg='#223441')
ws.resizable(width=False, height=False)

frame = Frame(ws)
frame.pack(pady=10)

lb = Listbox(
    frame,
    width=25,
    height=8,
    font=('Times', 18),
    bd=0,
    fg='#464646',
    highlightthickness=0,
    selectbackground='#a6a6a6',
    activestyle="none",
    
)
lb.pack(side=LEFT, fill=BOTH)

task_list = [
    'Eat apple',
    'drink water',
    'go gym',
    'write software',
    'write documentation',
    'take a nap',
    'Learn something',
    'paint canvas'
    ]

for item in task_list:
    lb.insert(END, item)

sb = Scrollbar(frame)
sb.pack(side=RIGHT, fill=BOTH)

lb.config(yscrollcommand=sb.set)
sb.config(command=lb.yview)

my_entry = Entry(
    ws,
    font=('times', 24)
    )

my_entry.pack(pady=20)

button_frame = Frame(ws)
button_frame.pack(pady=20)

addTask_btn = Button(
    button_frame,
    text='Add Task',
    font=('times 14'),
    bg='#c5f776',
    padx=20,
    pady=10,
    command=newTask
)
addTask_btn.pack(fill=BOTH, expand=True, side=LEFT)

delTask_btn = Button(
    button_frame,
    text='Delete Task',
    font=('times 14'),
    bg='#ff8b61',
    padx=20,
    pady=10,
    command=deleteTask
)
delTask_btn.pack(fill=BOTH, expand=True, side=LEFT)


ws.mainloop()

Output:

Here is the output screenshot for the above code. Here you can notice that a Listbox is appearing with a scrollbar. Entry box I placed right below it followed by two buttons.

python tkinter todo list project
Python Tkinter ToDo List

This is how we can build a ToDo list using Python Tkinter from the beginning.

You may like the following Python Tkinter tutorials:

In this tutorial we have learned to create a simple todo list application using Python tkinter.

  • About Tkinter ToDo List in Python Tkinter
  • Features of ToDo List in Python Tkinter.
  • Code explanation for ToDo list in Python Tkinter.
  • todo list source code with explanation using Python Tkinter