How To Create REUSABLE App Components In Python (Flet Tutorial)

in this lesson we're going to be learning how we can create reusable components in flet for example previously we learned how to make an increment counter but we did that all through the main entry point which kind of sucks because we can't duplicate that if we want to use it in other places we hardcoded everything in the main entry point but in programming this is one of the biggest mistakes you can make you want everything to be as reusable as possible so in this example we're going to be creating the same increment counter except this time as you can see we have three of them and I didn't create three separate ones these are all the same component with a few modifications such as the first one says people the second one says animals and the third one says items but these are components that we can easily reuse without having to create it three times in a row so that's what we're going to be doing in this lesson I'm just going to be showing you how you can create reusable components so that you can take your flat apps to the next level so as always the first thing you want to do is create a new empty project in pycharm or Visual Studio code or whatever code editor you have and we also need to import flet as ft in case we need to use some extra functionality that we didn't expect to use but otherwise the functionality that we do expect to use will be from this import here so from import so from Flat import user control text row page control event main access alignment and finally elevated button these are the elements that I plan to use but in case I need to use something extra I'm just going to refer to Ft do whatever component I need so first of all let's create our main entry point as we always do and this will be called main which of course takes a page of type page and that returns none next we will have a page. tile that will equal reusable ible app and Page do horizontal alignment is going to equal Center and the page. vertical alignment is also going to be equal to the center and down here we're just going to add a Todo that we want to add three increment counters so here we'll type in three increment counters and we're going to just type in if name is equal to Main and pass in ft. apppp and we're going to set the targets to main so that's the basic setup of our window but we still need to create the functionality for those increment counters and to do so we're going to create our very own custom class called increment counter and this needs to inherit from user control and user control just allows us to build isolated and reusable components by combining existing flat controls and a user control behaves just like a normal control which means it can have methods and properties anyway let's continue with building our our very own custom component and the first thing I want to Define is an initializer and that's going to return none but there are a few parameters that I want to provide such as the text which will be of type string and the start number cuz maybe we'll have an increment counter that starts on a different number but the default will be set to zero then once we provide an initializer that inherits from some sort of parent class we're going to have to call the super call so that we can initialize the user control as well then we can type in self. text is equal to text and self. start number is equal to the start number and the only component we're going to initialize here is the text number which is going to be of type text and that's going to equal a text with the value set to the string of the start number and I want the size to be big for that so I'm going to set that to 40 next let's create the functionality for the increment counter and the only functionality we're going to have here is a method that increments the counter so to do that we're going to type in increment and that's going to also take a second parameter besides self which is going to be of type control event and that will return to us none then the self. counter doesn't quite exist because I copied my other code wrong instead of start number this should be the counter but now the self. counter will exist so we can increment it by one each time we call this method and the self. text number is going to equal the string of the self. counter so we can keep track of that in real time and also there's something else we need to do each time we update the UI in a custom component and that is call the update method from within if you were to update it in your main entry point you would not see the changes in this component it kind of has its own scope that you need to update so remember to call update if you want to see see those changes now the only method that's required by user control or to create a custom component is the build method so at the bottom we're going to create this method called built and it's going to return to us a row and it doesn't have to be a row you can even return a container or a button or something else it can even be a text field what's important is that we return something so we can add it to our page of course but in this case we're going to return a row with the controls set to First the elevated button which needs some self. text as the text and the onclick is going to be set to the self do increment then we can add a comma and also add our self. text number then I want to set some alignment and that's going to be of type main AIS alignment do space between and I'm going to give this a width of 300 and that takes care of our entire component now with this being done we can just use it as a normal component so inside our main entry point we can get rid of the Todo and we can type in page do add and here we will add an increment counter and inside the Constructor we have the option to add some text and a start number but we will get started just by adding people as the text now let's actually try to run this before we add some more components and what we should get back is something like this as you can see we have people and a number and we can increment those people just by tapping on the number but let's go back to our project and next I'm going to add two more this time we're going to add something such as animals and the start number will be set to 25 and finally We'll add items which will be set to maybe 100 now let's run that one more time and I actually have it on a different window so I'll drag it here and this is what we will get we will get three counters with these start numbers that we specified and we can increment them from there without any issues so this ended up maximizing the reusability of our application or of the components in our application so we didn't have to recreate that increment counter each time we wanted to use it and in programming this is the ultimate goal to make everything as reusable as possible but that was actually everything I wanted to cover in this lesson it was a very light introduction to how you can make your application much more usable in flat in the future we're going to continue building upon this so that we can build some super awesome apps before chat gbt replaces us but anyways with all that being said as always thanks for watching and I'll see you in the next video

Channel: Indently

Views: 14,275

Keywords: pyton, pyhton, pythn

Id: ku_HZdgaOF8

Length: 7min 44sec (464 seconds)

Published: Thu Oct 12 2023