Python Tutorial - Flet Framework [Basics] For Beginners + App Design

Python tutorial using Flet framework, an extensive framework that offer's a wide range of material UI based on Flutter's own widget library. In this video, I dive into Flet's button widget with emphasis on IconButtons and ElevatedButtons. We'll see how we can alter a button's UI by call back event handlers. At the end of the tutorial I'll design a coffee-app that'll implement the tutorial concepts.

To install Flet: pip3 install flet

#python #tutorial

00:00 - 00:23 Intro (App Demo)
00:23 - 03:56 App Setup
03:56 - 23:00 IconButton
23:01 - 32:14 ElevatedButton
32:14 - 59:53 Build Exercise (Coffee App)

[marcoslima]

As I'm a beginner and haven't yet mastered OOP, I made a version without OOP of the first example (buttons and icons):


import flet
from flet import Column, Row, Container, Page, colors, icons, IconButton, ElevatedButton, ButtonStyle
from flet_core import RoundedRectangleBorder, BorderSide

def main(page:Page):
page.title = 'Flet Tutorial: Buttons and Coffee Adapted Without OOP'
page.window_width = 500
page.window_height = 700

#function changes the color of the icons
def changeColorIcon(e):
for button in myIcons.controls:
button.icon_color, button.selected = 'pink', None
button.update()

if e.control.selected != True:
e.control.icon_color, e.control.selected = 'black', True
e.control.update()

pass

#icones
myIcons = Row(
controls=[
IconButton(
icon=icons.HOME_FILLED,
icon_size=18,
icon_color='black',
selected=True,
on_click=changeColorIcon,
),
IconButton(
icon=icons.SHOPPING_BAG_ROUNDED,
icon_size=18,
icon_color='black',
selected=False,
on_click=changeColorIcon,
),
IconButton(
icon=icons.NOTIFICATIONS,
icon_size=18,
icon_color='black',
selected=False,
on_click=changeColorIcon,
),
]
)

# starts the selected icon with pink color
for button in myIcons.controls:
if button.selected != True:
button.icon_color = 'pink'

# creation of elevaterd button
myButton = Row(
controls=[
ElevatedButton(
text='Button 1',
width=105,
height=30,
style=ButtonStyle(
color={
"": colors.BLUE_500,
"hovered": colors.ORANGE_700,
},
shape={
"":
},
side={
"": BorderSide(
2, # border width
colors.PINK_600,
),
"hovered": BorderSide(
5,
colors.BLACK12,
)
}
)
)
]
)

# container and column creation
myContainer = Container(
width=310,
height=550,
bgcolor=colors.GREY,
content=Column(
controls=[myIcons, myButton]
)
)

page.add(myContainer)
page.update()

if __name__ == '__main__':
flet.app(target=main)

[alexander]

Hi Line Indent, do you know if there is a way to make a circular check button? I tried using a radio button but that one once you click it, it gets activated and disabled and i don’t know how to keep it enabled for the next off click, Any help would be appreciated!

[tfptyyw]

the video is soo disappointing. In intro, you demonstrated elevatedbutton switching but in the code, there's no code for that. Not a good tutorial.