Flet: Flutter in Python

Slide 1

Slide 1 text

Flet: Techniques & Tips

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Python Mauritius UserGroup (pymug) More info: mscc.mu/python-mauritius-usergroup-pymug/ Why Where codes github.com/pymug share events twitter.com/pymugdotcom ping professionals linkedin.com/company/pymug all info pymug.com tell friends by like facebook.com/pymug 3

Slide 4

Slide 4 text

Abdur-Rahmaan Janhangeer Help people get into OpenSource People hire me to work on Python projects https://www.compileralchemy.com 4

Slide 5

Slide 5 text

ssslides 5

Slide 6

Slide 6 text

Flet: Techniques & Tips 6

Slide 7

Slide 7 text

Overview 7

Slide 8

Slide 8 text

Codebase 8

Slide 9

Slide 9 text

Publish 9

Slide 10

Slide 10 text

Notes 10

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Techniques 13

Slide 14

Slide 14 text

Skeleton import flet as ft def main(page: ft.Page): page.title = "Window title" b = ft.TextButton("text") page.add(b) ft.app(target=main) 14

Slide 15

Slide 15 text

Events def button_clicked(e): ... button = ft.TextButton("text", on_click=button_clicked, data=0) 15

Slide 16

Slide 16 text

Update widget textfield.value = 'a' page.update(textfield) # page.update() 16

Slide 17

Slide 17 text

Routing 17

Slide 18

Slide 18 text

import flet as ft def main(page: ft.Page): page.title = "Routes Example" def route_change(route): page.views.clear() page.views.append( ft.View( "/", [ ft.AppBar(title=ft.Text("Flet app"), bgcolor=ft.colors.SURFACE_VARIANT), ft.ElevatedButton("Visit Store", on_click=lambda _: page.go("/store")), ], ) ) if page.route == "/store": page.views.append( ft.View( "/store", [ ft.AppBar(title=ft.Text("Store"), bgcolor=ft.colors.SURFACE_VARIANT), ft.ElevatedButton("Go Home", on_click=lambda _: page.go("/")), ], ) ) page.update() def view_pop(view): page.views.pop() top_view = page.views[-1] page.go(top_view.route) page.on_route_change = route_change page.on_view_pop = view_pop page.go(page.route) ft.app(target=main, view=ft.WEB_BROWSER) 18

Slide 19

Slide 19 text

import flet as ft class View: url = '/page' elements = [ ft.ElevatedButton(text="Elevated button"), ft.ElevatedButton(text="Elevated button") ] @classmethod def do_something(cls): ... @classmethod def view(cls): return ft.View( cls.url, cls.elements, ) 19

Slide 20

Slide 20 text

def main(page: ft.Page): page.title = "Routes Example" def route_change(route): page.views.clear() page.views.append( ft.View( "/", [ ft.AppBar(title=ft.Text("Flet app"), bgcolor=ft.colors.SURFACE_VARIANT), ft.ElevatedButton("Visit Store", on_click=lambda _: page.go("/store")), ], ) ) if page.route == View.url: page.views.append( view.elements ) page.update() def view_pop(view): page.views.pop() top_view = page.views[-1] page.go(top_view.route) page.on_route_change = route_change page.on_view_pop = view_pop page.go(page.route) 20