1 00:00:03,090 --> 00:00:03,340 Hi. 2 00:00:03,980 --> 00:00:10,140 In this lecture, I'm going to show you how to create a minimalistic mobile app using Python 3 00:00:10,410 --> 00:00:11,640 and it's ivy Library. 4 00:00:12,150 --> 00:00:18,420 What we are going to create is this one page app that you see in here. 5 00:00:19,080 --> 00:00:21,240 As I showed to you in the previous video. 6 00:00:21,570 --> 00:00:24,070 This app is actually a multiscreen app. 7 00:00:24,540 --> 00:00:28,470 So when you click, click, log in, you go to another screen and then sign up to another screen and 8 00:00:28,470 --> 00:00:28,860 so on. 9 00:00:29,430 --> 00:00:33,300 But in this lecture, I'm just going to show you the minimal app. 10 00:00:33,600 --> 00:00:41,250 And that's like a template that you can use to write any other apps, no matter if they have one screen 11 00:00:41,280 --> 00:00:42,900 only or multiple screens. 12 00:00:43,500 --> 00:00:50,010 So I'm going to keep this screenshots here on the screen because this is necessary when you create the 13 00:00:50,130 --> 00:00:55,110 interface, a graphical interface so that you code by looking at your design. 14 00:00:55,830 --> 00:01:01,980 This could also be in a piece of paper where you have drawn a sketch of how the interface looks like. 15 00:01:03,150 --> 00:01:05,730 So what you need is a Python file. 16 00:01:05,850 --> 00:01:07,410 Well, that's how everything begins. 17 00:01:07,890 --> 00:01:09,830 And I'm going to name my file 18 00:01:09,900 --> 00:01:10,380 main.py. 19 00:01:10,860 --> 00:01:12,780 You don't have to name it main.py, 20 00:01:12,810 --> 00:01:20,700 but it's a good practice because later on when we deploy our app, when you convert your app to an executable 21 00:01:20,760 --> 00:01:23,760 mobile app, that runs on a real mobile phone, 22 00:01:24,230 --> 00:01:27,570 you're going to have to name your file main.py. 23 00:01:27,960 --> 00:01:30,530 So it's a good idea to name it right now. 24 00:01:30,840 --> 00:01:32,280 So you don't have to rename it to later. 25 00:01:32,730 --> 00:01:35,280 Or maybe you forget later and and you get some errors. 26 00:01:35,730 --> 00:01:42,900 So, main.py. This main.py is where the logic of the program will be written in Python 27 00:01:42,900 --> 00:01:43,470 language. 28 00:01:43,950 --> 00:01:47,250 And there's also another file you need to create. 29 00:01:47,550 --> 00:01:48,900 You can name it whatever you like. 30 00:01:48,930 --> 00:01:52,380 But I'm going to name design.kv. 31 00:01:53,190 --> 00:01:56,940 So you have to use the kv extension and separate the screen. 32 00:01:56,970 --> 00:01:58,440 I'm going to put this in here. 33 00:01:59,250 --> 00:02:00,450 main.py in here. 34 00:02:00,750 --> 00:02:03,510 And I'm also going to show you this picture 35 00:02:05,000 --> 00:02:08,840 down here to keep it there. Main.py should stay here. 36 00:02:09,580 --> 00:02:09,950 All right. 37 00:02:10,460 --> 00:02:12,050 So what is this kv? 38 00:02:12,200 --> 00:02:13,550 Well, nothing to worry about. 39 00:02:13,850 --> 00:02:15,140 It's actually a good thing. 40 00:02:16,250 --> 00:02:22,370 There are two ways to create a mobile app with Python and the kivy library. 41 00:02:22,970 --> 00:02:29,120 The first way is to write everything in Python, which means the logic of the program. 42 00:02:29,790 --> 00:02:35,600 So the processing and everything that happens on the background with the data you're process, 43 00:02:35,600 --> 00:02:41,420 the user logg-ins, retrieval of weather observation data or whatever your app does. 44 00:02:41,840 --> 00:02:48,440 And the other part of the program is the graphical user interface, which is this thing here. 45 00:02:48,920 --> 00:02:50,990 Some sort of language. 46 00:02:51,050 --> 00:02:59,810 You need some sort of language to say, oh, a label with this font size and this font family and 47 00:02:59,810 --> 00:03:00,980 these textbooks and so on. 48 00:03:01,250 --> 00:03:03,590 And you can do that in Python. 49 00:03:04,040 --> 00:03:06,080 But that is not a good practice. 50 00:03:06,770 --> 00:03:15,680 It's a good idea to write that graphical interface in a .kv file in the kivy language. 51 00:03:16,070 --> 00:03:18,290 But kivy language is very, very simple. 52 00:03:18,380 --> 00:03:20,480 You're going to learn it in one day. 53 00:03:21,230 --> 00:03:24,560 So I'm not going to show you how to make both ways. 54 00:03:24,770 --> 00:03:30,740 So I'm not going to show you how to make a snap using both methods, which means the method of having 55 00:03:30,740 --> 00:03:36,380 everything in .py file and the method of having the logic in the .py file and the graphical 56 00:03:36,380 --> 00:03:38,410 interface in the kivy file. 57 00:03:38,690 --> 00:03:44,870 I'm just going to show you the rightway, which is using Python for a logic and kivy for the graphics. 58 00:03:45,290 --> 00:03:47,060 That's what every professional uses. 59 00:03:47,300 --> 00:03:48,570 So please, learn this way. 60 00:03:49,040 --> 00:03:52,220 And we start from the Python file. 61 00:03:52,700 --> 00:04:01,280 The first step is to import all the necessary objects from kivy. From kivy.app import App. 62 00:04:01,610 --> 00:04:02,780 This is a main object. 63 00:04:03,830 --> 00:04:07,210 It symbolizes the app. From kivy.lang 64 00:04:08,780 --> 00:04:11,180 import. 65 00:04:12,410 --> 00:04:19,300 If you were wondering how you connect the Python file with the kv file, the answer is this builder 66 00:04:19,430 --> 00:04:20,060 object 67 00:04:20,150 --> 00:04:21,620 I'm going to show in just a minute. 68 00:04:22,100 --> 00:04:28,100 After importing one more object from kivy.uix.screen manager 69 00:04:28,280 --> 00:04:31,880 import screen manager and screen. 70 00:04:32,990 --> 00:04:33,440 That's it. 71 00:04:33,710 --> 00:04:35,240 And then you use the 72 00:04:35,240 --> 00:04:39,480 Builder.load_file method. 73 00:04:40,190 --> 00:04:42,070 There you load the design 74 00:04:42,180 --> 00:04:42,860 dot kv 75 00:04:42,860 --> 00:04:43,820 file. 76 00:04:44,570 --> 00:04:48,440 So that's how this script will know about the kv file. 77 00:04:48,680 --> 00:04:51,560 Make sure these two files are in the same directory. 78 00:04:51,980 --> 00:04:53,110 Mean. py, 79 00:04:53,210 --> 00:04:53,840 design.kv. 80 00:04:54,290 --> 00:04:57,290 And then you go to your kv file. 81 00:04:57,590 --> 00:05:02,270 The way of the kivy language works is in an hierarchy level. 82 00:05:02,450 --> 00:05:04,880 So is an hierarchy of objects. 83 00:05:05,210 --> 00:05:06,650 So this is a screen. 84 00:05:08,270 --> 00:05:10,410 And this screen has widgets inside. 85 00:05:11,490 --> 00:05:14,150 So if you have only one screen, you're going to write. 86 00:05:16,200 --> 00:05:17,560 Just give a name to the screen. 87 00:05:17,670 --> 00:05:18,960 And use these symbols. 88 00:05:19,820 --> 00:05:20,640 And then a colon there. 89 00:05:22,160 --> 00:05:24,420 So I'm calling this screen the log in screen. 90 00:05:25,780 --> 00:05:27,810 And if you have another screen. 91 00:05:28,110 --> 00:05:33,810 Let's say when you click this button the sign up screen shows up and you want to write another screen like 92 00:05:33,810 --> 00:05:37,830 SignUpScreen the same way. 93 00:05:38,190 --> 00:05:40,980 But for now, we're just going to have one screen. 94 00:05:41,760 --> 00:05:45,030 And if you're wondering how did I get this purple nice color? 95 00:05:45,660 --> 00:05:48,720 Well, this is syntax highlighting for kivy language. 96 00:05:49,020 --> 00:05:52,170 And you can use an extension, the kivy extension. 97 00:05:52,550 --> 00:05:55,070 So just search for Kivi and use this extension. 98 00:05:55,620 --> 00:05:57,220 So install it and then enable it. 99 00:05:58,650 --> 00:06:03,120 And you're going to get syntax highlighting in visual studio code, which is a good thing. 100 00:06:03,510 --> 00:06:06,000 So then the log in screen has a widget I said, 101 00:06:06,030 --> 00:06:14,490 and once you press enter, you want to indent with a tab or four spaces, just like in Python. 102 00:06:14,790 --> 00:06:16,080 So the first widget is. 103 00:06:16,270 --> 00:06:18,250 And so the first widget is a label. 104 00:06:18,420 --> 00:06:24,420 But instead of doing that, you want to add another widget on top of the label. 105 00:06:24,840 --> 00:06:26,350 It's an invisible widget. 106 00:06:26,400 --> 00:06:27,900 But it's still a widget. 107 00:06:28,410 --> 00:06:29,230 It's a Grid Layout. 108 00:06:33,300 --> 00:06:35,190 You don't use these symbols anymore. 109 00:06:36,120 --> 00:06:37,710 You just use it for the screen. 110 00:06:39,070 --> 00:06:39,790 A grid 111 00:06:39,930 --> 00:06:40,450 layout 112 00:06:40,590 --> 00:06:41,580 what it is, is 113 00:06:42,760 --> 00:06:47,050 basically, the type of area which will have all the other widgets. 114 00:06:47,580 --> 00:06:53,710 So down here, we're going to add the other widgets and it's a way to separate the area. 115 00:06:54,010 --> 00:07:01,030 So the screen and the way I think I'm thinking of separating my screen, of organizing my screen is 116 00:07:01,630 --> 00:07:05,770 by having a main grid layout that will have every thing. 117 00:07:05,940 --> 00:07:12,220 And then this grid layout will contain two other grid layouts. A grid layout for this area here. 118 00:07:12,760 --> 00:07:19,750 And this particular grid layout is going to have one column and an undefined number of rows. 119 00:07:19,780 --> 00:07:23,170 So you can add as many rows as you can in this grid layout. 120 00:07:23,470 --> 00:07:32,500 So what I'm what I mean, is GridLayout and then another grid layout. 121 00:07:32,770 --> 00:07:37,930 So the first GridLayout is this entire grid 122 00:07:38,440 --> 00:07:41,550 which will have one column only. 123 00:07:42,250 --> 00:07:45,190 And this grid layoutthis made of two grid layouts. 124 00:07:46,030 --> 00:07:48,970 This one in here and this one in here. 125 00:07:49,450 --> 00:07:53,590 So this one is this and that is that. 126 00:07:54,690 --> 00:08:03,600 The reason I split it this way is because this area here is has widget which are organized 127 00:08:04,020 --> 00:08:09,570 in the same way, which means we have only one column here and here we have two columns. 128 00:08:10,170 --> 00:08:17,460 So in this second grid layout, I'm going to declare cols: 2 the attribute and here by default 129 00:08:17,520 --> 00:08:19,770 these grid layouts that they have only one column. 130 00:08:19,980 --> 00:08:22,380 So I'm going to leave it as one column. 131 00:08:23,970 --> 00:08:33,560 And then what's you add here is 'Label', that is the first widget we have here, enter and then tab. 132 00:08:33,690 --> 00:08:42,390 So everything is indented, the text over the label is in quotes "User Login. 133 00:08:42,990 --> 00:08:46,830 And then what we have under the label is a TextInput. 134 00:08:49,680 --> 00:08:51,020 The text of the text input 135 00:08:52,560 --> 00:08:54,720 that's not what we want here. 136 00:08:54,900 --> 00:08:56,410 What we want here is hint_text. 137 00:08:57,480 --> 00:09:00,120 So that's username that you see inside the textbooks. 138 00:09:00,450 --> 00:09:04,240 It's like a hint for the user, username. 139 00:09:05,690 --> 00:09:10,710 And so here we are adding widgets as rows for that grid layout. 140 00:09:11,190 --> 00:09:16,890 Then we have another text input with the hint_text 141 00:09:24,110 --> 00:09:27,470 "Passwords", and then we have a button 142 00:09:29,520 --> 00:09:36,780 with text "Login", and then we go to the other grid lay out. We have two buttons here. 143 00:09:39,500 --> 00:09:42,620 The first one has as text: 144 00:09:45,470 --> 00:09:49,730 "Forgot Password" and the other one has 145 00:09:50,710 --> 00:09:54,400 as text: "Sign up". 146 00:09:55,120 --> 00:09:56,080 And that's it. 147 00:09:56,600 --> 00:10:00,480 That's all you have to do for now for the log in screen. 148 00:10:00,880 --> 00:10:03,610 Now, there's also something else you have to do. 149 00:10:04,990 --> 00:10:08,170 So go to the first level of indentation. 150 00:10:08,260 --> 00:10:10,390 Same as logging screen. 151 00:10:11,410 --> 00:10:11,860 You see here. 152 00:10:13,560 --> 00:10:16,920 Just there and you want to add another rule. 153 00:10:17,750 --> 00:10:24,630 So in the Kivu language, these things here, in these symbols, inside these symbols are rules. 154 00:10:24,630 --> 00:10:27,660 This other rule is the root for widgets. 155 00:10:28,650 --> 00:10:35,670 So it's basically an invisible widget that keeps records of all the screens of the app. 156 00:10:36,510 --> 00:10:40,980 And in this case, we only have LoginScreen. 157 00:10:41,520 --> 00:10:45,090 And this log in screen has to have a name. 158 00:10:47,520 --> 00:10:49,920 So let's say "login_screen" in quotes. 159 00:10:51,720 --> 00:10:58,470 You're going to see later on that we're going to need this name when we refer to the login screen from 160 00:10:58,470 --> 00:11:06,240 within the Python file, because the logic will be written in Python, where you see that if the user presses 161 00:11:06,240 --> 00:11:06,840 that button, 162 00:11:07,230 --> 00:11:12,450 we're going to say something like screen dot current equals to login screen. 163 00:11:12,480 --> 00:11:18,120 So we're going to give the name of the screen that Python is going to show when the user presses that 164 00:11:18,120 --> 00:11:18,600 button. 165 00:11:19,230 --> 00:11:20,880 And that's all we have to do 166 00:11:20,970 --> 00:11:22,530 in the kivy file. 167 00:11:23,190 --> 00:11:24,810 Make sure that you are 168 00:11:24,810 --> 00:11:30,060 not using assignment operators instead of colons. 169 00:11:31,230 --> 00:11:32,500 So use colons. I use to do this mistake 170 00:11:32,790 --> 00:11:34,590 when I was learning kivy language. 171 00:11:34,950 --> 00:11:38,160 Because you are used to Python where you use assignment operators a lot. 172 00:11:38,640 --> 00:11:42,390 So have a look at your file and then go to Python. 173 00:11:42,840 --> 00:11:50,820 And what we need to do in Python now, we need to create some sort of empty classes which have the same 174 00:11:50,820 --> 00:11:56,100 name as these rules in here, which means class 175 00:11:57,830 --> 00:12:01,620 LoginScreen, use the same case. 176 00:12:01,830 --> 00:12:06,510 So I use capital L and a capital S in here. 177 00:12:06,840 --> 00:12:07,530 Same as here. 178 00:12:07,560 --> 00:12:09,780 So it has to be a same string 179 00:12:09,840 --> 00:12:10,410 exactly. 180 00:12:11,160 --> 00:12:17,850 And this string has to inherit from the screen object. 181 00:12:18,600 --> 00:12:23,210 So it's going to be a screen object. For now let's say just pass. 182 00:12:24,600 --> 00:12:30,430 And then you have to create another class, which is, you guessed it, the RootWidget. 183 00:12:32,640 --> 00:12:37,710 So every rule here has to be represented by a class inside Python. 184 00:12:38,160 --> 00:12:42,010 The RootWidget has to inherit from ScreenManager. 185 00:12:42,150 --> 00:12:45,450 So don't worry if this code is a bit rigid for now. 186 00:12:45,720 --> 00:12:51,450 So you have some rules which seemed like a black box, but think of it as just a template. 187 00:12:51,460 --> 00:12:53,290 You going to use this template for every app. 188 00:12:53,320 --> 00:12:57,020 So it's a good thing to have a pass for that too. 189 00:12:57,090 --> 00:13:00,480 And lastly, this is the last thing I promise. 190 00:13:01,020 --> 00:13:03,560 You also need the class MainApp. 191 00:13:04,500 --> 00:13:08,160 So this is about the app object that we haven't used yet. 192 00:13:08,670 --> 00:13:12,630 So this has to inherit from App, that one in there. 193 00:13:15,070 --> 00:13:17,800 And this needs a method's called build. 194 00:13:20,640 --> 00:13:21,600 Self. 195 00:13:22,060 --> 00:13:25,320 So every method needs a self parameter. 196 00:13:25,720 --> 00:13:29,620 Until this build method is actually a method of app. 197 00:13:30,100 --> 00:13:32,760 You can see that if you use here. 198 00:13:37,170 --> 00:13:40,290 So I executed that line and dir app. 199 00:13:42,000 --> 00:13:48,780 You see, build is among those objects in those methods there, build. 200 00:13:50,210 --> 00:13:59,120 All right, and so, that build method is going to return the root widget. 201 00:14:00,870 --> 00:14:03,900 But make sure that is the object and not the class. 202 00:14:04,350 --> 00:14:07,440 So we are initializing the root widget in here. 203 00:14:07,870 --> 00:14:15,330 You can see I'm using the round brackets and the very last thing is if and once we have done that, 204 00:14:16,740 --> 00:14:19,950 this is the app now, we are ready to execute. 205 00:14:20,610 --> 00:14:22,620 But as you see, here is the python file. 206 00:14:22,920 --> 00:14:25,350 We are not calling any class. 207 00:14:26,160 --> 00:14:31,160 So the very last thing we need to do is, of course, call the main app class. 208 00:14:31,950 --> 00:14:36,840 A good practice to do is to use if __name__ == 209 00:14:38,760 --> 00:14:39,100 "__main__": 210 00:14:41,410 --> 00:14:51,160 then you create an instance or the MainApp and then use the run method of the main app, which is, 211 00:14:51,160 --> 00:14:53,140 by the way, it's a method of app. 212 00:14:53,830 --> 00:14:56,980 So you can see run also in here, just there. 213 00:14:58,910 --> 00:15:04,250 Save that script and I'm going to execute now the file and see what we get. 214 00:15:04,670 --> 00:15:09,260 I expect, of course, to get some errors because I don't think I did everything 215 00:15:09,320 --> 00:15:10,040 Hundred percent. 216 00:15:11,360 --> 00:15:11,780 Yes. 217 00:15:11,870 --> 00:15:12,840 I didn't get an error. 218 00:15:12,980 --> 00:15:14,420 Everything is fine 219 00:15:14,480 --> 00:15:15,390 in the terminal. 220 00:15:16,010 --> 00:15:18,720 But the interface doesn't look as I expected. 221 00:15:19,130 --> 00:15:22,010 So I have made some mistakes there. 222 00:15:22,820 --> 00:15:29,360 So sometimes you don't get an error in the terminal, which makes it harder to troubleshoot the problem. 223 00:15:29,840 --> 00:15:32,120 And if you don't get an error where you should look. 224 00:15:32,150 --> 00:15:34,910 Is the code in your kv file. 225 00:15:35,750 --> 00:15:43,040 So in this particular case, it looks like the grid layout is not working as it's supposed to be. 226 00:15:43,690 --> 00:15:50,330 And the reason for that is that I didn't specify how many columns the grid layout should have, the 227 00:15:50,330 --> 00:15:57,200 main grid layout, but also the other one, the child of that parent, grid layout. 228 00:15:57,790 --> 00:16:01,640 So before making a change, you need to close this window. 229 00:16:01,970 --> 00:16:02,960 I'm going to go here. 230 00:16:03,230 --> 00:16:09,400 So I'm going to pass a cols attribute, just like I did with this grid layout. 231 00:16:10,670 --> 00:16:15,260 So let me just test it with that parent grid layout first. 232 00:16:16,540 --> 00:16:17,860 So this is what we get. 233 00:16:21,290 --> 00:16:22,690 As you can see it compared to this, 234 00:16:22,920 --> 00:16:29,520 we are not seeing the first grid layout elements, which is the label, the user name, the password and 235 00:16:29,520 --> 00:16:37,360 the button, because these widgets are actually hidden inside this forgot password bottom. 236 00:16:37,620 --> 00:16:39,540 So they are somewhere in here. 237 00:16:41,110 --> 00:16:41,740 In the corner. 238 00:16:42,100 --> 00:16:44,290 So when you don't specify these columns, 239 00:16:44,890 --> 00:16:45,940 how many columns you have, 240 00:16:46,420 --> 00:16:51,190 kivy will just tuck all the widgets in the lower left corner. 241 00:16:51,670 --> 00:16:53,280 So if we close this now. 242 00:16:53,320 --> 00:16:57,610 And we also add a cols attribute equal to one, 243 00:16:58,120 --> 00:17:02,260 and if I don't save it and I run this again, I'll see the same output. 244 00:17:02,830 --> 00:17:06,760 So I need to save this script, control S, and then run it again. 245 00:17:07,210 --> 00:17:12,970 And this time we see what we were expecting, more or less. 246 00:17:13,540 --> 00:17:18,360 We still need to add some padding and some spacing between the widgets to make it look like here. 247 00:17:19,390 --> 00:17:20,750 But this is what we get so far. 248 00:17:20,770 --> 00:17:21,570 And I think it's good. 249 00:17:23,180 --> 00:17:27,230 So I'm going to close this now and consider this code as done. 250 00:17:27,350 --> 00:17:32,150 But before I close the video, I'll make sure you understand what is going on in here. 251 00:17:32,780 --> 00:17:35,910 So this kivy file, all this things you see here, 252 00:17:35,980 --> 00:17:40,110 GridLayout, LoginScreen, TextInput, Button. 253 00:17:40,610 --> 00:17:43,190 These are actually python objects. 254 00:17:43,610 --> 00:17:52,930 Some of them, such as Login Screen and RoutWidget, are objects represented by classes which we created 255 00:17:52,970 --> 00:17:55,520 in the Python file, Login Screen 256 00:17:55,550 --> 00:17:56,560 and the RootsWidget. 257 00:17:56,840 --> 00:18:00,620 The other ones are classes you import from Kivi. 258 00:18:01,400 --> 00:18:07,530 So if we were to code in Python only not in kivy language, we would have to do something like 259 00:18:07,550 --> 00:18:19,220 from kivi.uix.gridlayout, import grid layout, so that it is the same class as this 260 00:18:19,220 --> 00:18:19,830 one in here. 261 00:18:20,420 --> 00:18:25,670 But the kivy file will import these objects implicitly. 262 00:18:26,000 --> 00:18:34,780 So it will import them either from your python file, such as LoginScreen and Widget or from the kivy library. 263 00:18:35,090 --> 00:18:35,690 In this case. 264 00:18:35,700 --> 00:18:38,510 So we don't we are not importing any great layout here. 265 00:18:39,530 --> 00:18:41,060 The same thing would be with button. 266 00:18:41,300 --> 00:18:45,590 So from kivy.uix.button import button. 267 00:18:46,460 --> 00:18:47,570 Same for text widget. 268 00:18:47,870 --> 00:18:51,230 So we are not importing this objects in here. 269 00:18:51,530 --> 00:18:53,020 So that's about the objects. 270 00:18:53,090 --> 00:18:54,260 All these are objects. 271 00:18:54,290 --> 00:18:57,680 And then you have these attributes of these objects. 272 00:18:58,010 --> 00:19:04,430 So if you open a python shell and you import that GridLayout object as I showed in here and then 273 00:19:04,430 --> 00:19:10,700 you do dir GridLayout inside the round brackets, you'll see cols is one of the attributes 274 00:19:10,730 --> 00:19:12,590 of the grid layout object. 275 00:19:13,310 --> 00:19:19,070 And so that's about the objects. Now about the hierarchy of kivy app. 276 00:19:19,580 --> 00:19:20,690 It works like this. 277 00:19:21,050 --> 00:19:23,870 The highest in hierarchy is the app. 278 00:19:24,940 --> 00:19:33,460 So this app object in here, then comes the screen manager, which is actually represented by the Root 279 00:19:33,510 --> 00:19:34,030 Widget. 280 00:19:34,580 --> 00:19:36,680 So the RootWidget comes after the app. 281 00:19:37,640 --> 00:19:42,050 Then we have the screen, which is represented by logging screen. 282 00:19:42,410 --> 00:19:45,650 So this login screen is just a child of screen. 283 00:19:45,680 --> 00:19:48,530 It behaves the same way as a screen. 284 00:19:49,130 --> 00:19:55,610 And by the way, we could also have done something else here, which I'm going to show you just now. 285 00:19:56,690 --> 00:20:05,300 You could simply pass LoginScreen like that and then here what you could do is you could add the 286 00:20:05,300 --> 00:20:08,770 RootWidget which is in hierarchy 287 00:20:08,810 --> 00:20:10,550 it's above the LoginScreen. 288 00:20:11,030 --> 00:20:14,990 And then in the LoginScreen, you could pass: 289 00:20:15,100 --> 00:20:17,390 name: "login_screen" 290 00:20:19,540 --> 00:20:23,190 just like that, and you could delete that. 291 00:20:24,090 --> 00:20:30,220 So that would be the same code and you get the same output as you can see in here. 292 00:20:33,670 --> 00:20:39,820 So this indicates what I just said, that RootWidget is a parent and then comes the login screen, 293 00:20:39,850 --> 00:20:44,370 and inside login screen, you have grid layout, you have another grid layout text input and so 294 00:20:44,460 --> 00:20:44,640 on. 295 00:20:45,400 --> 00:20:50,080 However, to keep the code more organized because here in the RootWidget 296 00:20:50,470 --> 00:20:55,930 later on, we'll have to add another screen like SignUpScreen. 297 00:20:57,280 --> 00:21:00,190 And so this would have its own children. 298 00:21:01,210 --> 00:21:09,880 And so on, then we'd have another screen like LoginError screen where the user would be sense if there 299 00:21:09,880 --> 00:21:12,370 was an error in the log in credentials. 300 00:21:13,480 --> 00:21:15,940 So the code would become too complex. 301 00:21:16,960 --> 00:21:25,090 Therefore, what we have instead is we use, we have the login screen as a rule. 302 00:21:25,360 --> 00:21:27,250 And also the RootWidget as a rule. 303 00:21:27,580 --> 00:21:35,920 And then we specify that the LoginScreen is actually a child of the RootWidget using here. 304 00:21:36,430 --> 00:21:44,920 And so likewise, we add other screens just the same way. 305 00:21:46,270 --> 00:21:51,160 So that's something to keep in mind because it helps you better understand how kivy works. 306 00:21:51,640 --> 00:21:53,610 And that's what I hate about this video. 307 00:21:53,650 --> 00:21:55,240 I hope to see you in the next video.