Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flet: Flutter in Python

Flet: Flutter in Python

Abdur-Rahmaan Janhangeer

April 15, 2023
Tweet

More Decks by Abdur-Rahmaan Janhangeer

Other Decks in Education

Transcript

  1. Flet: Techniques & Tips

    View full-size slide

  2. 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 full-size slide

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

    View full-size slide

  4. Flet: Techniques & Tips
    6

    View full-size slide

  5. Techniques
    13

    View full-size slide

  6. 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 full-size slide

  7. Events
    def button_clicked(e):

    ...

    button = ft.TextButton("text", on_click=button_clicked, data=0)

    15

    View full-size slide

  8. Update widget
    textfield.value = 'a'

    page.update(textfield) # page.update()

    16

    View full-size slide

  9. 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 full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. Dev experience
    21

    View full-size slide

  13. Icons
    ft.icons.PAUSE_CIRCLE_FILLED_ROUNDED

    22

    View full-size slide

  14. Color
    ft.color.RED_400

    23

    View full-size slide

  15. Next in this session
    24

    View full-size slide

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

    View full-size slide