Creating GUI Applications With Tkinter In Python | Utopian Tutorial

This tutorial is for the people who have learned the core elements of Python and can easily create command line applications but now want to move forward towards building Graphical User Inter (GUI) Applications. Tkinter is a module that helps you create a GUI application that have stuff like buttons, dropdowns, menus and images. There are some other modules that you can use to build GUI too but the we will be learning today is Tkinter.

Repository

https://github.com/python/cpython
https://github.com/python/cpython/tree/master/Lib/tkinter (Built In Tkinter)

What Will I Learn?

In this tutorial series we will learn about the things given below.

• Importing Tkinter
• Creating A Basic Window
• Putting The The Text In The Window
• Running The Main Loop
• Understanding Frames
• Creating A Top And Bottom Frame
• Adding First Widget (Button)

Requirements

You fully understand this tutorial and concepts of Tkinter, you must have basic knowledge about Python and stuff like for loop and while loop in it. Here are the things that you should have.

• Python 3.6
• A Good Code Editor (PyCharm)

Difficulty

• Intermediate

Tutorial Content

Basics

Importing Tkinter

Tkinter is built in by default in Python 3 so you won't need to install it. First step will be to import all of the things from the Tkinter. You can do it by typing from tkinter import * so to explain it further we are importing all of the things which is represented by * from the Tkinter. In Tkinter all of the things like buttons, sliders and menus are called widgets and all the widgets are inside a window. So our first step will be to build a window. In the below image you will see that import is turned gray, this is because in PyCharm if we don't use the import then it turns to grey and that's just how it works.

Creating A Basic Window

To create a basic window to put widgets in we need create a window object. To create a window object first we will need a variable and technically we can name it anything but because many people name it "root" I am gonna do the same. So type root = Tk(), we are assigning root to Tk class to make it window object. You can think of root as a blank window for now and it isn't gonna be interesting to see at it.

Putting The The Text In The Window

Before I show you how the window looks, let's just add some simple text into the window so we will actually have something to see inside the window. To add text inside window we will first create a variable and name it label_1, we can't set it to just label because it is a function inside Tkinter. Now set label_1 variable to Label(root, text="Dickery Dockery Dock"). You can take help from the image given below. So Label is a function that helps us to write text on window and it takes two parameters. First parameter is the window name (in which window we will look add text to) in our case it is root. Second parameter is text that we want to add and I have just added the text that came into my mind first so it's just random for me but you can put any text there. Make sure you to don't use double quotes inside the text because it will cause errors.

The text won't show for now because we still have to assign where we will like to show our text. In the later tutorial I will tell you about how you can precisely put things where you want but for now I'll just do a really easy way. Just type the text object which in our case is label_1 and then add .pack() infront of it. So what pack actually does is that is justs packs or fits the object in the window in the first place it can fit it.

Running The Main Loop

Main loop is a very important concept to understand for making GUI application. I mean you can kinda get by but still it's better to understand it. If we run the code now then it won't do anything. In the GUI applications we need the application to continuously run so we can interact with it. In the command line interface this doesn't happen but scripts run and when scripts are finished code ends. There is a function Tkinter known as mainloop and what it does is that it helps us too keep the window running and the only we to exit the mainloop is by clicking on red (x) which can be found at top right if you are on Windows and on top right if you are on Linux. Creating a game loop is fairly simple in Tkinter and it can be done by typing root.mainloop() so now it will continuously run the root (which is the window). So let's run the code now and we can see how the window looks now.

Aww... Look at our cute little window!

Organizing The Layout

Understanding Frames

In the upcoming tutorials I will be teaching how you can make cool widgets and all that but before doing that let's actually learn about how we can organize layout. First of all I will like to introduce you to the concept of Frame. Frame is like a sub window inside the main window. So there can be a top frame which covers the top half part of the window and there can be a bottom frame which covers the bottom half of the window. Then inside the frames we can add widgets.

Creating Top And Bottom Frame

Let's create a top frame for our application. We can do this by making a variable, let's name it top_frame assigning it to Frame(root) so what this will do is that it will create a invisible frame on top of our window. Now that we have created the frame let's actually place it because it is not yet placed. We can place it by typing top_frame.pack() the easiest way to place anything. Creating just one frame is useless because we can just place without it so we will create a bottom_frame aswell. You can do the same thing you did for top_frame. In the pack() of bottom_frame you can add a extra parameter that will tell it where actually you want to pack it in. So we can do something like bottom_frame.pack(side=BOTTOM) now it will only place bottom_frame at the bottom. You'll be scratching your head thinking that we had to specify for the bottom_frame but why didn't we specified side for top_frame, this is where common sense comes in. If you something is at the bottom of another thing obviously other thing will be at top.

Adding First Widget (Button)

First of all let's delete the label that we created before moving on. Now that we have created a frame let's create a widget. At the start we are just gonna create a simple button to let you know how widgets are created and all that but don't worry in my upcoming tutorials we are actually gonna create some cool widgets. To create a button you will first need to create a variable, let's name if button_1 for now and set it to Button(top_frame, text="Button 1", fg="red"). The Button function takes three parameters, first one is in which frame we will like like to place the button, second is the text that will be shown on the button like "click me" etc. Third parameter is the fore ground color of the which is set to red in our case. Now that we have created our first button let's create a another button but this time we will like to show it in bottom_frame, I think you can do that on your own. When you have done it come back here. Now that we have created the two buttons let's actually place them and which you know we can by typing the code below.

button_1.pack()
button_2.pack()

Often you'll forget to pack or place the widgets. It's a two step process so don't forget it.

How it looks in a window!

Tip

As you can see in the above image the button are showing on top of each other, what if we wanted to show one on right and other on left. Before moving towards the answer let me explain you how pack() works a little more. When we use the pack it just adds the widget on top the frame which we specified so if we want it at left side we can add a extra parameter and that parameter is side, we have also used it earlier. If we want one button on right and one on left then we can add the code given below.

button_1.pack(side=RIGHT)
button_2.pack(side=LEFT)

Summary

We learned alot today let's recap what we did. First we imported tkinter and made window. Then we learned about how we can add text to the window. We ran the main loop which allowed us to view our window. Then we started to learn about organizing the layout and how we can add frames. At last I told you how you can make a button and then a simple tip about pack().