what's going on guys, John Older here from coding.com, and in this video, we'll look at modern GUI design with Kinter. Alright guys, like I said, in this video, we're going to look at modern GUI design with Kinter. Before we get started, if you like this video, you want to see more like it, I'm sure do smash the like button below, subscribe to the channel, give me a thumbs up for the YouTube algorithm, and check out kobe.com. We have dozens of courses with thousands of videos to teach you to code. Use coupon code youtube50 to get 50% off memberships, all my courses, videos, and books for one-time fee, which is insanely cheap. Alright guys, like I said, in this video, we're going to look at modern GUI design with Kinter, and one of the biggest complaints that I get, and I get it a lot, is that yeah, Kinter is really easy to use, but it looks clunky, it looks old, it looks outdated. We just can't have that. What's the use of it if it looks like it's from

the 1990s, right? No more. Somebody finally fixed this, and this is amazing. Finally, there's a library out that allows you to do modern GUI design. And look at this, we've got an app right here, a little example. It's modern-looking. The title bar here is black. That's really hard to do normally. Some of these things, you know, there's rounded stuff, the colors are more modern-looking, the buttons look modern. You hover over them, and they change. And just playing around with this, so you can see we could do all kinds of stuff here. When we click on these things, this is an entry box. It looks definitely more modern. Very cool. And there's just tons of customization you can do with this library. So we're going to start to talk about this thing in this video. I'm going to set this up, show you how to create this, show you where you can get more information. And in future videos, we'll dive into this in more detail because there's a lot of stuff to unpack here, and this is really, really cool. So let me go ahead and close.

this head over to our code. I'm using the Sublime Text editor and the Git Bash terminal as always. And as always, you can find a link to the code in the pinned comment section below, as well as a link to the playlist with all the other Kinder videos in this series, over 200, so check those out if you haven't so far. So I've just got a file here. I'm calling it cust, short for customized, I guess, .pi. It's in my C GUI directory. And let's head over to the web, to our web browser real quick, and check out github.com forward slash tom schmanski forward slash custom kinder. And I'll put a link to this in the description below. We talked about Tom a couple of videos ago with the map view. That's the same guy that created that map view we just did in the last couple of weeks. He's created this custom Kinter library, which is just absolutely amazing. So you can come through here and look at this and read all about it if you want to look at the

documentation. You can click on it here. You can see here's a list of all the different widgets you can use. If you want to like use a button, for instance, you can click on here. This is the code you would use. Here are the different options you can do, resizing and height and width and all that kind of stuff, all the attributes basically. You can come through here for each of the things you might want to use. If you want to use a label now, you can learn all about how to do a label. And this works on top of kinter. It's basically the same as using any kinder widget, but instead of using the button widget in kenter, you're going to use the ctk button widget in this library. So let's come back here to the main page here. And to install this, we just need to pip install custom kinder. So let me just go ahead and copy this, head over to our terminal. I'm in my c gui directory, and let's just pip, and then let me paste this in, install custom kinder.

and it will go through and do its thing. That's all there is to it. Now we can start using this. So what I'm going to do here in this video is head back over here, and we can come up to the examples library, and let's just grab the complex example. So I'm going to click on this, and let me just kind of copy all this real quick. I'm going to do the lazy way to copy this. I'm just going to copy this, head back over to our sublime text, and paste this in. That's all there is to it. Go ahead and save this, head back over to our terminal, and then let's just python cust dot pi run that file. And right away, we get an error. So the first line of code here, they're constantly changing and updating this. And just a couple of days ago, you can see there was an update on the GitHub account. So you know some of the things may not work exactly. So we could just take out this line of code, this very first line of code here for this.

user scaling, and if you come back over to the GitHub page, come back here, we see here he fixed scaling two days ago. So maybe he didn't fix it, or he didn't push the upgrade to the pip repository thing or whatever. But anyway, we can comment out this line, go ahead and save this, head back over to the terminal, run this guy again, and boom, we see right away. If we unclick it, it turns dark. If we click on it, it goes blue, and it's very cool. So we can switch to light mode. This is what light mode looks like. If we click off of it, see the white bar at the top. If we click on it, it turns blue. That's just a Windows thing. You could change that in your Windows settings for all apps, you know what I mean? How you do that in Windows display or whatever. So very cool. We've got modern-looking sliders, modern-looking buttons, modern-looking entry boxes. This whole sort of gray thing here is very cool, and you'll notice these buttons are blue. It's very easy to customize this in a

lot of different ways. So, if we head back over here, we can see, uh, you know, the default theme is blue, and here's a couple other ones. We could go dark blue or green. Let's try green. I don't know. Go ahead and just change it to green. Head back over here. Run this guy again. Boom. Now everything is green. Very cool. Just that easy. Very modern-looking and very awesome. We can keep playing around with it. I don't know. Let's go dark blue. What does dark blue look like? Save this. Run it again. All right. Nice dark blue buttons. I like that. Whatever you like. All kinds of different options here. And the mode, like the appearance mode, is system. We also have dark or light. So, we can change this to, I don't know, dark. Save this. Run it. You're not going to see a huge difference here because we already have the dark mode. We've already looked at that here, right? But that's cool. You can set that by default just that easily. So, let's look through here. Now they're using classes.

For this example, you don't have to use classes. You can use regular functions like we do in all of our kinder videos. And like I said, we'll go on this in the future, but you can see to use this here. You're doing a frame instead of a dot frame. It's a ctk frame, and t key stands for obviously kinter, so that's cool. Same thing here, ctk button, and you'll notice you can do all of the same regular kinter stuff. This works on top of kinter, and it's just that easy. If we come up here to the top, we can see, yeah, we're importing kenter, we're still using it, we're just also importing custom kinder, and that's really all you need just to import custom kinter like that. And now you can start using it, and we can look at a very basic example. This is just very basic. Like I said, to use this, you just import custom enter, set these two attributes at the top, the basic color system you want to use, if you want to use dark mode by

default you would put that there. Here you have blue, dark green, and green, and I believe you can add your own color themes fairly easily using JSON, but we'll get into all that later. You can see right here, you know, we're just creating a route like we always do, but instead of making a Tk instance, we make a custom tkinter.tk instance, and that's really kind of it. Again, down here to use a button, we just set a button equal to that right stuff inside of here. Looks very familiar to the regular tkinter that we always use. So, like I said, we'll get into all this stuff in future videos. You can see you can put images on buttons. Very cool. Remember, here's that map widget we talked about. It shows you how to integrate this custom tkinter into map widget, which is cool. But like I said, we're going to get into all this in greater detail in future videos. I just wanted to show it to you very quickly so you can head over to this link, Tom Schmanski, custom tkinter.

you can dig through here, play with a little bit. This is very, very cool and really opens the door to turning Kinter into a modern GUI framework, right? Kendra is great because it is super easy to use, but it looks a little clunky, and there's always been kind of hacks and workarounds you could use to make it look a little more modern. But even so, it still kind of doesn't look great, right? Even if you can change themes and do stuff like that. And some of the hacks we've looked at in past videos in the playlist, this just turns the tables completely. And uh, very, very cool. So check it out and more on this to come because this is very exciting stuff. Tom Schmanski, you're brilliant, whoever you are. Thank you so much for creating this. This is a lot of fun. And uh, yeah, so that's all for this video. If you liked it, be sure to smash the like button below, subscribe to the channel, give me a thumbs up for the YouTube algorithm, and check out kodamy.com. You

can use coupon code youtube50 to get 50 off membership. So, that's access to all my courses, over 50 courses, thousands of videos in the PDFs of all my best-selling coding books. Join over 150,000 students, learn to code just like you. My name is John Elder from codingvideo.com, and I'll see you in the next video.

Modern GUI Design With Tkinter - Python Tkinter GUI Tutorial 219

Modern GUI Design With Tkinter - Python Tkinter GUI Tutorial 219

Scripts