Up next in 10
In Flet, the concept of View plays a central role. A View is the top-level container that encompasses all other controls within an application. When a new user session starts, a root view is automatically created.
Python Flet - How to create a App View in Flet
pip install pipenv
pipenv shell
pip install flet
Support The Channel 👇👇:
Buy me a coffee ☕ : https://buymeacoffee.com/usandopy_
⚡️ Connect with me on:
🌐 Website: https://www.usandopy.com/en/
📸 Instagram: https://www.instagram.com/pybeginners/
🐦 Twitter: https://x.com/joaofuti_
🔗 LinkedIn: https://www.linkedin.com/in/joao-futi-muanda-16b980175/
🎥 YouTube: https://www.youtube.com/ @pybeginners
Show More Show Less View Video Transcript
0:01
hello guys welcome back to the channel
0:02
my name is so uh in this second video
0:06
about python flet so today we are going
0:07
to learn about app views in Python okay
0:11
so app view in Python flat okay it's a
0:13
concept that plays a very Central role
0:16
okay it's very important so a view is
0:18
the top level usually okay of a
0:20
container that will Encompass all the
0:23
controls within an application okay so
0:26
controls also we'll talk after some time
0:28
okay about what is the control okay
0:29
which which is something very important
0:31
also when it comes to flight but today
0:34
we we are going to FOC only on app view
0:37
okay we learn how we can create a view
0:39
for our flat app so for that let's do
0:42
something like this
0:44
see in order to create any view okay for
0:48
our app in flat okay we have to do
0:50
something like that first we need to
0:51
import flat okay since in the last video
0:54
okay we already installed flat and we
0:56
create our visual environment okay so
0:58
now we are going to create our first
1:00
flat app okay so for that let's do
1:01
something like that first we need to
1:03
import flat okay something like this
1:05
import flat and we are going to consider
1:07
it as ft okay Doom then after that we
1:11
need to create our main view okay our
1:13
view for the flat app so in order to
1:15
create a view for the flat app we have
1:18
to do something like this okay first we
1:19
need to create any
1:21
function def main okay then we need to
1:24
give a page okay then
1:28
Dot and then we going going to call this
1:30
ft that we call it we import okay ft do
1:34
page okay so usually this page is the
1:37
one that will be uh that we are going to
1:40
give a lot of stuff okay that will be
1:41
like inserting the bottoms the input
1:44
field the test field so the page okay is
1:47
like a view okay will be like our main
1:49
view okay so then after that okay we
1:53
when we are creating a view okay we can
1:56
define a view uh title okay for example
2:00
this page here that we give we give here
2:02
okay is the one that we are going to
2:03
consider as a view okay as like the main
2:06
page okay the main view of our app so
2:09
this main view also we can give a lot of
2:11
stuff like we can give the title we can
2:13
change the uh the padding we can change
2:16
the width also of the view it's like we
2:18
can add a lot of stuff inside of a view
2:21
okay so but first okay after we do this
2:24
okay first let's call it do pass we we
2:28
we will not do anything okay then when
2:30
we create our function then we need to
2:32
call so that we can run this function
2:34
okay so for that we can do something
2:36
like this ft do app okay open so this
2:40
app we are going to call the main
2:42
function which will be this guy okay so
2:45
Target okay will be equal what equal
2:48
main which is this one okay Target main
2:51
then if I save this okay now let's run
2:53
to see what is our result if I run this
2:56
uh run
3:00
so as you can see okay we got our
3:03
results okay so this is the result that
3:05
we got okay so this one is the one that
3:07
is we are going to call the view okay
3:10
app is like the page of app so inside of
3:13
this window okay we can insert a lot of
3:15
stuff as I said before okay we can
3:16
insert a button we can insert input
3:18
field we can insert a check button so
3:21
like we can also add like app bar okay
3:24
which can will be here
3:26
okay even na bar so like we can set a
3:28
lot of stuff so this is the page that we
3:30
will need to manage okay so as you can
3:32
see this page doesn't have anything okay
3:35
so the first thing that we can do here
3:37
okay we can add for example like title
3:40
inside of it okay so for that we can do
3:43
something like this okay I'm just going
3:44
to close and instead of giving pass okay
3:47
now let's insert something like that
3:48
okay for let's define the title okay
3:50
let's say page do title okay will be
3:54
equal and here I can give any title
3:57
which I want okay I'm just going to call
3:58
for View up okay view
4:03
up now see if I run this okay I'm just
4:07
going to run
4:13
this and as you can see okay nothing
4:17
happen okay it's not showing anything
4:18
here uh in the beginning this is because
4:22
okay in flat okay when we add something
4:26
okay in flat when we add something
4:28
inside of the page we need to update the
4:31
page so that it can reflect the change
4:33
that we just make so for examp it can be
4:35
something like this okay uh for
4:36
meanwhile I'm just going to close this
4:38
okay to okay I will hide that so when we
4:41
add something we need to update the page
4:43
so that it can show the things okay now
4:45
if I do something like this for example
4:46
okay
4:48
page dot
4:50
update update open and close save now if
4:53
I run this
4:58
again okay now you can see uh we got
5:02
something here okay now we got something
5:04
as you can see okay view app okay so
5:07
this page Point uh this page. update say
5:10
is the thing that we used to use in flat
5:13
okay so that it can reflect the any
5:15
change that we are going to do in our
5:17
app okay this page. update is the one
5:19
will help us to show the change that we
5:22
will make okay so this one is the thing
5:24
that you'll be using a lot in Flats okay
5:30
then apart of giving uh page we title
5:34
okay we can also change the width and
5:36
the height of a page okay for example
5:38
for that we can do something like this
5:40
okay page dot window okay we need to
5:44
call it window dot width okay width will
5:48
be equal then here we can give any size
5:50
that we wish okay for example let me
5:52
give like 300 okay save now if I run
5:55
this guy let me see as you can see now
5:59
the width is is starting like this okay
6:00
and apart of that also we can Define
6:02
also a height okay let's say page dot
6:06
window okay dot
6:10
height height do height okay will be
6:14
equal uh I don't know why but I think I
6:17
wrote this s
6:18
Wrong height I think it's the edge uh I
6:22
always get confused how to write this
6:24
guy okay okay so I'm just going to do
6:26
that then let's see what is going to
6:28
happen if I'm going to get not let me
6:30
save save and if I run this okay but I
6:33
don't know but I think this guy is wrong
6:34
I don't know if I WR it oh exactly uh
6:37
okay no hi how to right right oh my God
6:40
can I
6:43
forget if he's not like this oh I know I
6:47
okay I did my mistake was Zero okay
6:49
instead of window I put WID okay page do
6:52
window okay dot height okay now I think
6:56
height is like this HD
6:59
oh hey I didn't know okay okay save okay
7:04
Isa said okay I speak Portuguese so
7:06
sometimes there are some word in English
7:08
sometime I that I used to struggle okay
7:09
so I'm sorry for that now okay we can
7:11
run this guy to see what will be the
7:13
result okay as you can see now the
7:15
windows the main H okay is something
7:17
like this okay
7:19
so this is how you can change the
7:23
dimensions of your page of your flat Hub
7:26
okay so we can change the width we can
7:28
change the height we can give us the
7:30
title and also we can
7:35
okay so a part of this we can also
7:38
change the background color of our page
7:40
okay so for that we can do something
7:42
like this uh page dot uh BJ BJ color
7:48
which is that this is the one that we
7:49
use to change the color background color
7:52
of our flat up okay so we be equal then
7:55
here we can give any color that we wish
7:58
okay so but this inflate it also some
8:00
kind of uh some
8:02
predefined uh colors that we can make
8:05
use of them for for to use that we can
8:07
do something that ft dot colors okay
8:11
then Dot and we can give them any color
8:13
that we wish as you can see now even
8:15
here appear a lot of colors that we can
8:17
make use of them okay uh for example if
8:19
I use this this guy okay and gray blue
8:24
gray okay for if I use this blue gray
8:26
okay 900 then I can just save and uh now
8:30
let's let me close this and run this
8:37
again boom as you can see okay now we
8:39
got we change the background color okay
8:41
so apart of giving this way there are
8:44
some alternative ways that you can give
8:46
the colors okay so instead of giving
8:48
this okay you can give like colors also
8:50
in exod exod decimal okay which is
8:52
something like this okay I can do
8:54
something like this 3 4 okay uh
8:58
98 DB oh sorry DB okay I can give any
9:02
extra decimal color which I wish okay I
9:05
can save theer just about running this
9:08
and boom you see we Chang the color okay
9:10
so apart of this there is another way
9:12
also that we can do which is using Okay
9:15
R GB colors okay for that I can just
9:18
delete this guy okay for that I can do
9:20
something like this AG GB okay a gba
9:25
open then I can give for them some
9:27
something like that okay 255
9:30
comma Z comma Z comma and if I give 0.5
9:36
for example okay save and if I run this
9:38
guy let me
9:40
see and boom this Al this is also
9:42
another way that I can give color so
9:44
there kind of three ways that I can pass
9:46
a color to our okay in flat okay that we
9:49
can change color by using exod decimal
9:51
or by using some pred predefined colors
9:54
or by using rgba okay also you can use
9:58
to change the color
9:59
or or to give a color in flat
10:05
up and also okay inside of this page we
10:08
can add also some controls so controls
10:10
is something that we'll talk after some
10:12
time okay so control is nothing that for
10:15
example those test okay the test that is
10:17
going to show and even those buttons the
10:20
check button even drop down buttons okay
10:23
so all of these things okay that is what
10:25
we call uh controls in flat okay so for
10:28
example in order to add any control
10:31
inside of our page or our view okay we
10:34
can do something like this okay page do
10:38
controls okay page. controls controls
10:41
controls page do controls okay do
10:46
append okay append okay how to create a
10:49
control so in order to create a control
10:51
uh we call for Ft do for test okay so
10:54
test is a control that help us to show
10:57
uh a test inside of our flat app then we
11:01
can open this and I we just say for
11:03
example hello
11:06
hello hello safe okay so in order to
11:11
show this okay I can just come here and
11:13
run and never forget okay every time
11:15
when you add something never forget in
11:18
the end to put this gu page P page do
11:21
update okay so it's like a you add
11:24
everything here on the top okay then in
11:25
the end just use page. update because
11:27
page. update is the one who going to
11:29
reflect the change that we made in our
11:31
app okay so then let me save this and
11:33
run this
11:35
guy boom as you can okay hello okay so
11:38
this is how you can add the test in
11:40
Python flat okay so there is a a lot of
11:44
ways that we can do that okay but for
11:45
now just let's stay with this one okay
11:48
and there is also kind of a short form
11:50
okay for if I don't want to do something
11:52
like this okay page do update okay even
11:55
if I don't want to write this long form
11:57
okay there is another way that I can do
11:59
I can just do something like this okay
12:00
for example page do add okay what I I
12:05
will do open then I will just call like
12:08
ft do test ft. test
12:13
again and open and close I can say for
12:16
examp
12:18
hual save so for examp when we add like
12:22
page do ad if when we use page. add okay
12:25
we we don't need to use page do update
12:27
okay so for example let me show some
12:29
thing and if I save this okay let's run
12:32
this
12:34
guy okay I'm just going to close this
12:36
let me run
12:38
it as you can see okay here we have hual
12:42
okay but for example if I remove this
12:44
page. controls okay I'm going to remove
12:47
it and if I put it after page. update
12:51
okay save and if I run it
12:55
now as you can see uh this one is not
12:58
showing
12:59
which is hello okay is not showing okay
13:02
because we need to do update so that it
13:03
can reflect the change but if I remove
13:06
this guy here page do add okay I remove
13:09
and put it after the update okay save
13:13
and if I
13:15
run as you can see it's still showing
13:17
High okay so when you use page. add okay
13:20
you you don't you don't need to use
13:22
update okay you need to like refresh the
13:24
app you can just do page. update and it
13:27
will insert the things directly
13:33
and also there is a way that we can also
13:35
like remove any control okay uh inside
13:39
of our view okay so in the way to remove
13:42
any control inside our view we can do
13:45
something like this okay let me remove
13:46
this this long form okay uh I'm going to
13:50
use more stuffs here okay I'm going to
13:52
put more stuff here copy uh for example
13:56
one 2 three okay uh we for like page.
14:00
add hi then this will be this can just
14:04
be for
14:07
hello and okay like what what's up okay
14:13
like a hi okay for examp let me save
14:16
this and let me run
14:19
it as you see we have a lot of stuffs
14:22
here okay so in order to remove any
14:24
control okay inside of our page okay we
14:26
can use page. pop okay
14:29
see page page controls. pop is it help
14:32
us to remove anything okay for examp if
14:34
I do something like this page do
14:38
controls okay controls dot pop okay let
14:43
open and close save and if I run this
14:45
now
14:50
okay now okay let's run this guy
14:55
okay then as you can see okay nothing
14:57
happen see when you use page do control.
15:00
pop okay we need to update our view so
15:03
that it can reflect the change okay so
15:05
now if I just come copy this page do
15:07
update okay okay I'm just going to
15:09
remove it from there go a little up okay
15:13
I'm going to put it after page do
15:15
control pop okay save it save and if I
15:18
run this guy
15:19
now boom as you can see now it remove
15:22
okay so this page. pop okay it will
15:25
remove the lastest okay the lastest cont
15:28
that we will add in our app okay so
15:30
that's why we can see this hual it it
15:33
vanish okay it's not there anymore so
15:35
page. poppet remove the last one okay
15:37
the last width that we will add in our
15:42
app and but see there is a better way
15:45
that we can manage the controls inside
15:46
of our views okay so for that let's do
15:49
something like this okay let's do
15:50
something a little more complex okay
15:52
than this just this simple example so
15:54
for that we can do something like this
15:55
okay I'm going to keep those guys okay
15:58
but I will remove at least one of them
16:01
okay this Tre byebye okay and I'm going
16:04
to create any function okay death add
16:08
because the best way to manage the uh
16:11
the views inside of our so the controls
16:13
inside of our views okay we can do
16:15
something like this okay let me add def
16:17
do add okay def. ADD test def do
16:23
addore test okay I'm going to create any
16:25
function to manipulate this this will
16:27
receive an event okay okay do what we
16:30
I'm going to do so this guy I'm just
16:32
going to put it inside of this function
16:34
okay page do add uh ADD test okay
16:39
perfect now we can what we can do is
16:41
okay we can create any function again
16:43
page. remove test okay remove underscore
16:47
test we will create any function to
16:49
remove the test inside of our view okay
16:51
save and Dot do this okay so let's do
16:55
something like this okay if length Okay
16:58
of length of what page do controls okay
17:02
in order to get the length of the
17:04
controls H okay is greater greater than
17:10
zero okay lot we can do something like
17:13
this okay I'm just going
17:15
to get those guys okay and put them
17:17
inside of this function okay come back
17:21
and this guys so will be inside of this
17:23
e function okay boom we'll do something
17:25
like a page do control. pop okay page do
17:28
uh up date perfect save so this one is
17:30
to add the things and this one is to
17:32
remove things okay so how uh if I save
17:35
this and if I
17:38
run
17:42
okay we can see that nothing happen Okay
17:46
so this is because for examp even those
17:48
start letter def is not showing so
17:50
because the update is not there anymore
17:53
okay so in order for that I have to
17:54
remove this update here okay not to
17:56
remove I just have to copy and put any
17:58
updated L it down boom save okay perfect
18:02
now if I run this guy again now we can
18:05
see the thing is back okay but right now
18:07
we don't have anything okay so let's add
18:10
any controls for like for bottoms okay
18:13
so that it can show we can help us to
18:16
manipulate this stuff so in order let's
18:18
do something like this okay page do add
18:22
oh so do
18:24
add page. add I'm going to do this okay
18:27
so there is another thing that
18:29
okay we can add it okay so it called
18:32
like a contain not contain okay it's
18:34
called like a row okay I can do
18:36
something like this but row is part of a
18:38
container but then after sometime we'll
18:40
learn about it okay I can do something
18:42
like this page do row okay open and
18:45
close again and here inside we can add
18:48
like
18:49
another another control okay this
18:51
control is called cont elevated bottom
18:54
okay I can do something this ft do
18:57
elevated bottom which this one itself
19:00
okay I can open and close so elevated
19:02
button is kind of a button uh okay if
19:04
you want to add a button in flat we can
19:06
use elevated button okay then after
19:08
sometime we'll talk about it but here we
19:10
are just trying to understand how we can
19:12
manipulate H those control inside of
19:15
view okay perfect so then here I can
19:18
give the name of the button for add text
19:21
Okay add text perfect then I can give
19:25
Comm then I will say onclick okay on
19:29
click it will be equal okay it will be
19:32
equal
19:34
add ADD test okay so on click is a
19:37
predefined okay thing that we use to
19:39
manipulate the bottoms okay so that we
19:41
can give a function to a bottom when we
19:43
click it so that we can say that it to
19:45
do something then we can say on click
19:49
add underscore test okay ADD test so it
19:53
will add we are giving this function to
19:54
this bottom okay then we can use it
19:58
comma okay then let's give Al for let's
20:01
get Al botom for this guy okay for the
20:03
remove so for that I'm just going to
20:05
give boom I'm going to create a same
20:06
button same type of button then here
20:08
instead of ADD test I'm going to say
20:11
remove okay remove test perfect then we
20:14
say un click we have to
20:18
give we have to give this guy okay the
20:20
remove test I'm going to copy it boom
20:24
come here and boom remove test save okay
20:27
perfect now uh since I am using this
20:31
page do add okay I don't need to give
20:34
this update anymore okay I can just
20:35
remove it here okay because when you use
20:39
ad okay add is kind of uh it do kind of
20:42
uh refresh also to our page okay so that
20:45
those things will reflect also in our
20:47
things so now I can save this and if I
20:51
run this okay let's run
20:54
it oh I got some kind of error okay and
20:58
and let's try to understand why I get
21:01
this error and if I come here and come
21:05
up let's see he said okay El botom is
21:09
not inable okay I think I did some kind
21:12
of
21:13
mistake
21:15
this so perfect I got this because when
21:18
you create like f row okay all those
21:21
things they must be inside of a list
21:24
okay so I have to do something like this
21:25
okay I have to open a list here oh sorry
21:28
I have to open a list and those guys
21:32
they are supposed to be inside of this
21:34
list not like this okay yeah they are
21:36
supposed to be here okay that's why I
21:39
got that
21:41
error I'm just going to select them I
21:43
want to I like to organize them so that
21:45
they can look good okay save and now
21:47
let's run this guy again okay this is
21:49
the error let's run it
21:53
again boom as you can see okay now we
21:56
have this thing okay ADD test remove
22:00
test for if I click it add test okay
22:03
boom see it add okay high if I click
22:06
high again high but if I click on remove
22:09
boom it remove the last one boom it
22:12
remove the last one okay so this is how
22:14
you can
22:15
manipulate uh view okay Contour that are
22:18
inside of a view in Python
22:22
flat okay and apart of this okay for
22:26
this buttons as you can say okay all of
22:28
them they are kind of the left side okay
22:30
but we can also align them to be in the
22:32
center so for that we can do something
22:34
like this here in this side of this
22:36
inside of this row okay we can just come
22:39
here okay put a comma okay and then
22:41
let's give some let's configurate some
22:45
some okay some alignment okay for this
22:47
row so for that we just have to come
22:50
here and say alignment which is this one
22:52
okay we can say ft dot okay we can say
22:56
main okay main what main axis align this
23:01
one will be dot then we can give Center
23:04
as you can okay we have Center and space
23:07
rounded something like this but let's
23:08
use on Center okay then every time when
23:11
you finish never forget to use comma
23:13
okay so I can save and uh now if I run
23:17
this
23:18
guy boom as you can see now those
23:21
bottons they are in the center okay the
23:22
same thing work I can just do like this
23:25
and I can remove the things okay so this
23:27
is uh how you can create a view for your
23:30
flat app okay so we'll stay here in the
23:32
next video okay we are going to continue
23:34
exploring more about python flight okay
23:37
my name is if you like the video give a
23:39
like and subscribing to the channel okay
23:41
bye-bye see you soon