Przejdź do treści głównej

GUI - Flet

Flet to biblioteka bazująca na Flutterze. Umożliwia tworzenie stacjonarnych i moblinych aplikacji w Pythonie. Dostarcza gotowe komponenty umożliwiające budowanie graficznych interfejsów użytkownika.

Ponieważ Flutter został stworzony w Google to interfejs stworzony z jego pomocą ma dość charakterystyczny wygląd wpisujący się w tzw. Material Design.

Dużą zaletą Flet-a jest duża ilość dobrze opisanych domyślnych ustawień - stworzone są one w taki sposób, że edytory kodu "podpowiadają" nam jakie mamy możliwości.

Instalacja Flet-a

pip install flet[all]

Ściągnie to wszystkie zależności i dodatkowe narzędzia używane podczas korzystania z frameworku Flet.

Przez framework rozumiemy szablon z zestawem komponentów wykorzystywanych do budowy aplikacji.

Bazowy schemat aplikacji

Aplikacje w Flet-ie można budować m.in. stosując podejście obiektowe.

W przypadku początkowych aplikacji można jednak podejść do tego prościej.

Można np. stworzyć funkcję opisującą okno programu, w niej z kolei będziemy deklarować wszystkie komponenty.

Takim komponentem może być przycisk, pole tekstowe itd.

Następnie należy dodać te zadeklarowane elementy do okna aplikacji (poprzez page.add).

Na samym końcu z kolei wywołamy naszą funkcję.

import flet

def main(page: flet.Page):

    page.title = "Tytul" # tytul okna
    
    page.add( # dodaj do okna / strony
        flet.Row( # dodaj wiersz
            [flet.Text("Moj tekst", size =12)] # dodaj tekst
        )
    )

flet.app(main)

Czyli importujemy aplikację, tworzymy funkcję odpowiadającą za zbudowanie okna (czyli np. dodanie pól tekstowych, przycisków itd). Następnie funkcję tę wywołujemy za pomocą flet.app.

WAŻNE!!! Aplikację zbudowanej z framework-iem Flet lepiej uruchamiać przez flet run nazwapliku.py, a nie przez guzik "play" w VSCode czy python nazwapliku.py". Uruchomienie poprzez flet run` powoduje, że nie musicie cały czas zamykać i otwierać okna po zaktualizowaniu aplikacji - zmiany wczytają się automatycznie.

Lista komponentów

Flet udostępnia całą masę flutterowych elementów - przycisków, pól do wpisywania danych, różnej maści menu itd.

Informacje na ich temat można znaleźć tutaj:

https://flet.dev/docs/controls

Najbardziej podstawowe komponenty to m.in.:

  • Text . Nieinteraktywny tekst wewnątrz okna
  • TextField. Pole do wprowadzania danych
  • FilledButton. Przycisk wypełniony kolorem, z zaokrąglonymi bokami.

W praktyce

Przykładowa aplikacja wyświetlająca komunikat powitalny:

import flet


def strona_glowna(page: flet.Page):

    # funkcja wykorzystywana w oknie, podpieta do przycisku
    def przywitaj(_event):
        if imie_pole.value:
            imie = imie_pole.value
            komunikat_tekst.value = f"Witaj {imie}!"
            komunikat_tekst.update()

    # sekcja ustawien okna
    page.title = "Hello!"

    # sekcja komponentów
    imie_pole = flet.TextField(
        label="Wprowadź imię:",
    )
    witaj_przycisk = flet.FilledButton(
        text=" przywitaj ",
        on_click=przywitaj,
        style=flet.ButtonStyle(padding=10),
    )
    komunikat_tekst = flet.Text("")

    # sekcja umieszczenia komponentów w oknie
    page.add(
        imie_pole,
        witaj_przycisk,
        komunikat_tekst,
    )


flet.app(strona_glowna)
Powrót na górę