How to create a GUI calculator in Python using Tkinter

Leave a Comment / Application / By

Are you looking for a way to create a GUI calculator in Python using Tkinter? If so, then you have come to the right place! In this blog post, we will go over the steps to create a basic calculator in Python that has a Graphical User Interface (GUI). With Tkinter, you will be able to easily create a simple calculator with all the basic mathematical operations such as addition, subtraction, multiplication and division. We will also discuss how to customize the GUI to make it more visually appealing and user-friendly.

What is Tkinter?

Tkinter is a Python library that provides access to an extensive range of graphical user interface (GUI) elements. It is used to build GUI applications in Python and it is the standard GUI package for Python. Tkinter has been around since the early days of Python, and it has been highly influential in the development of modern GUI programming. Tkinter provides a powerful object-oriented interface to the Tcl/Tk GUI toolkit. With Tkinter, you can create a wide range of desktop applications that look great and feel natural.

Read this post if want to learn the basics of the Tkinter library: How to Create Desktop Application Using Python

Also Read: Basics of python programming in 30 days

How to create a GUI calculator in Python using Tkinter

Design the Calculator App

Before we start coding we first need to design the calculator GUI. To be sure of what exactly we are trying to achieve. For this tutorial, our calculator will look like the one below.

create calculator GUI in python using tkinter
The graphical interface of the Calculator App

Okay, now we know what we want to achieve. Let’s now start our coding. I will divide the entire code into some steps to build our basic calculator in Python with the Tkinter library.

Step1: Import Library & Set-up Application Window

For this tutorial, I am going to set our application window size: width = 312 pixels and height = 324 pixels.

import tkinter as tk

# Create app window
win = tk.Tk()

# Specify screen size of the Application window
win.geometry("312x324")

# Disable resizing the app window
win.resizable(0, 0)

# Specify application name
win.title("Calculator")

Step2: Define Functions

In this step, we will write all the required functions for our calculator project.

################### python code for calculator gui ####################

input_value = ""

# Intialize StringVar
display_text = tk.StringVar()

# Function to continuously updates input field whenever you click a button
def click_button_action(item):
    global input_value
    input_value = input_value + str(item)
    display_text.set(input_value)

# Function to clear the display
def clear_button_action(): 
    global input_value 
    input_value = "" 
    display_text.set("")

# Function to calculate input values 
def equal_button_action():
    global input_value
    result = str(eval(input_value))
    display_text.set(result)
    input_value = ""

In this code we are creating three functions:

  • click_button_action: This function is to show values to the screen
  • clear_button_action: This function is to clear the screen
  • equal_button_action: This function is to calculate and displays the result

Here in this code:

  • In line 6 : We are initializing the StringVar object. Tkinter StringVar allows you to effectively manage the value of a widget such as a Label or Entry.
  • Line 23 : We are calculating the output of a string input using the eval function.
    • For example: eval("5+4") => 9 (output)

Step3: Adding Widgets

Now we need to add all required widgets row-wise to make a graphical interface for our calculator app. First, we need to divide the entire window into two frames, then we need to add widgets inside those two frames.

  1. Display Frame
    • Widget => input field (Entry widget)
  2. Buttons frame
    • In this frame, all buttons of numbers and expressions will be there
    • 1st row: Clear button (combination of first 3 columns) and divide button (/)
    • 2nd row: Button 7, 8, 9, and multiplication button (X)
    • 3rd row: Button 4, 5, 6, and subtraction button (-)
    • 4th row: Button 1, 2, 3, and addition button (+)
    • 5th row: Button 0 (combination of first two columns), point button (.) and equal button (=)
Also Read:  Build Sentiment Analysis Flask App
python-gui-calculator-frame-design

Okay now, let’s start designing our GUI calculator with functionality.

1. Create the Display frame

Let’s create the frame to display the inputs

# Create a frame for the display field
 
input_frame = tk.Frame(win, width=312, height=50, bd=0, highlightbackground="black", highlightcolor="black", highlightthickness=2)
 
input_frame.pack(side = tk.TOP)

Here bd is border width

1.1 Create an Entry widget

The Entry widget in Tkinter is used to enter or display a single line of text. Let’s create that.

# Create a input field inside the 'Frame'
 
input_field = tk.Entry(input_frame, font=('arial', 18, 'bold'), textvariable = display_text, width=50, bg="#eee", bd=0, justify=tk.RIGHT)
 
input_field.grid(row=0, column=0)
 
input_field.pack(ipady=10) # 'ipady'  is for internal padding to change the height of the input field

2. Create a Frame for buttons

Now let’s create another frame for buttons below the display frame or input frame.

# Create another 'Frame' for buttons
 
btns_frame = tk.Frame(win, width=312, height=272.5, bg="grey")
 
btns_frame.pack()

So, we created our button frame. Now let’s create all required button widgets row by row.

2.1 Create the First row

In this row, there should be only a clear button and a divide button.

# 1st row
 
clear_btn = tk.Button(btns_frame, text = "C", fg = "black", width = 32, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: clear_button_action()).grid(row = 0, column = 0, columnspan = 3, padx = 1, pady = 1)
 
divide_btn = tk.Button(btns_frame, text = "/", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: click_button_action("/")).grid(row = 0, column = 3, padx = 1, pady = 1)
2.2 Create the second row

In this row, there should be four buttons:

  1. Button for digit 7
  2. Button for digit 8
  3. Button for digit 9
  4. Button for multiplication (x)
# 2nd row
 
btn_7 = tk.Button(btns_frame, text = "7", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(7)).grid(row = 1, column = 0, padx = 1, pady = 1)
 
btn_8 = tk.Button(btns_frame, text = "8", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(8)).grid(row = 1, column = 1, padx = 1, pady = 1)
 
btn_9 = tk.Button(btns_frame, text = "9", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(9)).grid(row = 1, column = 2, padx = 1, pady = 1)
 
multiply_btn = tk.Button(btns_frame, text = "X", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: click_button_action("*")).grid(row = 1, column = 3, padx = 1, pady = 1)
2.3 Create the 3rd row

In this row, four buttons will be there:

  1. Button for digit 4
  2. Button for digit 5
  3. Button for digit 6
  4. Button for Minus or subtraction (-)
# 3rd row
 
btn_4 = tk.Button(btns_frame, text = "4", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(4)).grid(row = 2, column = 0, padx = 1, pady = 1)
 
btn_5 = tk.Button(btns_frame, text = "5", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(5)).grid(row = 2, column = 1, padx = 1, pady = 1)
 
btn_6 = tk.Button(btns_frame, text = "6", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(6)).grid(row = 2, column = 2, padx = 1, pady = 1)
 
minus_btn = tk.Button(btns_frame, text = "-", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: click_button_action("-")).grid(row = 2, column = 3, padx = 1, pady = 1)
2.4 Create the 4th row

In this row, four buttons need to be available:

  1. Button for digit 1
  2. Button for digit 2
  3. Button for digit 3
  4. Button for plus or addition (+)
# 4th row
 
btn_1 = tk.Button(btns_frame, text = "1", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(1)).grid(row = 3, column = 0, padx = 1, pady = 1)
 
btn_2 = tk.Button(btns_frame, text = "2", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(2)).grid(row = 3, column = 1, padx = 1, pady = 1)
 
btn_3 = tk.Button(btns_frame, text = "3", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(3)).grid(row = 3, column = 2, padx = 1, pady = 1)
 
plus_btn = tk.Button(btns_frame, text = "+", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: click_button_action("+")).grid(row = 3, column = 3, padx = 1, pady = 1)
2.5 Create the 5th Row

In this row, the last three need to be there:

  1. Button for digit 0
  2. Button for point (.)
  3. Equal button (=)
# 5th row
 
btn_0 = tk.Button(btns_frame, text = "0", fg = "black", width = 21, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(0)).grid(row = 4, column = 0, columnspan = 2, padx = 1, pady = 1)
 
point_btn = tk.Button(btns_frame, text = ".", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: click_button_action(".")).grid(row = 4, column = 2, padx = 1, pady = 1)
 
equals_btn = tk.Button(btns_frame, text = "=", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: equal_button_action()).grid(row = 4, column = 3, padx = 1, pady = 1)

Step4: Run mainloop()

At this point, we are done with our python code for the calculator GUI. Now we just need to run the mainloop() method to see the application live.

win.mainloop()

That’s it. You successfully created a calculator in python using the Tkinter library, which should be up and running in your windows system right now.

Also Read:  Django Basic login logout tutorial

Full Code

I discussed lots of things in order to create a Python calculator GUI. Allow me to now assemble everything and create a final code for you.

################### python code for calculator gui ####################
import tkinter as tk

# Create app window
win = tk.Tk()

# Specify screen size of the Application window
win.geometry("312x324")

# Disable resizing the app window
win.resizable(0, 0)

# Specify application name
win.title("Calculator")

# ------- Write required functions tkinter-calculator ----------

input_value = ""

# Intialize StringVar
display_text = tk.StringVar()

# Function to continuously updates input field whenever you click a button
def click_button_action(item):
    global input_value
    input_value = input_value + str(item)
    display_text.set(input_value)

# Function to clear the display
def clear_button_action(): 
    global input_value 
    input_value = "" 
    display_text.set("")

# Function to calculate input values 
def equal_button_action():
    global input_value
    result = str(eval(input_value))
    display_text.set(result)
    input_value = ""
    
# ----------------------------------------------------
# Create a frame for the display field
 
input_frame = tk.Frame(win, width=312, height=50, bd=0, highlightbackground="black", highlightcolor="black", highlightthickness=2)
 
input_frame.pack(side = tk.TOP)

# Create a input field (Entry widget) inside the 'Frame'
 
input_field = tk.Entry(input_frame, font=('arial', 18, 'bold'), textvariable = display_text, width=50, bg="#eee", bd=0, justify=tk.RIGHT)
 
input_field.grid(row=0, column=0)
 
input_field.pack(ipady=10) # 'ipady'  is for internal padding to change the height of the input field

# -------------------------------------------------------
# Create another 'Frame' for buttons
 
btns_frame = tk.Frame(win, width=312, height=272.5, bg="grey")
 
btns_frame.pack()

# 1st row
 
clear_btn = tk.Button(btns_frame, text = "C", fg = "black", width = 32, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: clear_button_action()).grid(row = 0, column = 0, columnspan = 3, padx = 1, pady = 1)
 
divide_btn = tk.Button(btns_frame, text = "/", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: click_button_action("/")).grid(row = 0, column = 3, padx = 1, pady = 1)

# 2nd row
 
btn_7 = tk.Button(btns_frame, text = "7", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(7)).grid(row = 1, column = 0, padx = 1, pady = 1)
 
btn_8 = tk.Button(btns_frame, text = "8", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(8)).grid(row = 1, column = 1, padx = 1, pady = 1)
 
btn_9 = tk.Button(btns_frame, text = "9", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(9)).grid(row = 1, column = 2, padx = 1, pady = 1)
 
multiply_btn = tk.Button(btns_frame, text = "X", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: click_button_action("*")).grid(row = 1, column = 3, padx = 1, pady = 1)

# 3rd row
 
btn_4 = tk.Button(btns_frame, text = "4", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(4)).grid(row = 2, column = 0, padx = 1, pady = 1)
 
btn_5 = tk.Button(btns_frame, text = "5", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(5)).grid(row = 2, column = 1, padx = 1, pady = 1)
 
btn_6 = tk.Button(btns_frame, text = "6", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(6)).grid(row = 2, column = 2, padx = 1, pady = 1)
 
minus_btn = tk.Button(btns_frame, text = "-", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: click_button_action("-")).grid(row = 2, column = 3, padx = 1, pady = 1)

# 4th row
 
btn_1 = tk.Button(btns_frame, text = "1", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(1)).grid(row = 3, column = 0, padx = 1, pady = 1)
 
btn_2 = tk.Button(btns_frame, text = "2", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(2)).grid(row = 3, column = 1, padx = 1, pady = 1)
 
btn_3 = tk.Button(btns_frame, text = "3", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(3)).grid(row = 3, column = 2, padx = 1, pady = 1)
 
plus_btn = tk.Button(btns_frame, text = "+", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: click_button_action("+")).grid(row = 3, column = 3, padx = 1, pady = 1)

# 5th row
 
btn_0 = tk.Button(btns_frame, text = "0", fg = "black", width = 21, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: click_button_action(0)).grid(row = 4, column = 0, columnspan = 2, padx = 1, pady = 1)
 
point_btn = tk.Button(btns_frame, text = ".", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: click_button_action(".")).grid(row = 4, column = 2, padx = 1, pady = 1)
 
equals_btn = tk.Button(btns_frame, text = "=", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: equal_button_action()).grid(row = 4, column = 3, padx = 1, pady = 1)

# Run main loop
win.mainloop()

End Note

In this tutorial, I created a calculator project in Python using the Tkinter library. Now, this is just a starting point, you can take this forward to make advanced calculator GUI projects such as a scientific calculator.

Also Read:  Make interactive dashboard using Dash with Python

This is all for this tutorial, if you have any questions or suggestions regarding this post, shoot those in the comment section below.

Share this

Leave a Comment

Your email address will not be published. Required fields are marked *