Flet: Flutter in Python

Transcript

1. Flet: Techniques & Tips
   

   View Slide

2. View Slide

3. 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
   

   View Slide

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

   View Slide

5. ssslides
   5
   

   View Slide

6. Flet: Techniques & Tips
   6
   

   View Slide

7. Overview
   7
   

   View Slide

8. Codebase
   8
   

   View Slide

9. Publish
   9
   

   View Slide

10. Notes
    10
    

    View Slide

11. View Slide

12. View Slide

13. Techniques
    13
    

    View Slide

14. 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
    

    View Slide

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

    View Slide

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

    View Slide

17. Routing
    17
    

    View Slide

18. 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
    

    View Slide

19. 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
    

    View Slide

20. 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
    

    View Slide

21. Dev experience
    21
    

    View Slide

22. Icons
    ft.icons.PAUSE_CIRCLE_FILLED_ROUNDED
    
    22
    

    View Slide

23. Color
    ft.color.RED_400
    
    23
    

    View Slide

24. Next in this session
    24
    

    View Slide

25. Code an app based on one of the previous sessions code
    25
    

    View Slide

26. View Slide