Flet - what is it and what is it eaten with. Library overview

Всех приветствую! Данная статья - первая про фреймворк Flet на zelenka.guru. Я решил написать эту статью, тк не увидел нигде в интернете хороших гайдов с комментариями, тем более на русском. Мой единственный источник - оф. документация. Давайте начнем:

​

Часть 1. Flet - что это?
​

Flet — фреймворк, предоставляющий Flutter компоненты для разработки кроссплатформенных интерактивных веб-приложений. Для начала работы с фреймворком необходимо установить его: pip install flet. В течение статьи я буду объяснять вам как же работает этот фреймворк и заодно писать на нем код. К концу статьи мы будем иметь небольшую рабочую программу. Но сейчас немного теории:​

• Данный фреймворк не требует знания веб-технологий, таких как HTTP, HTML, CSS или JavaScript.
• Пользовательский интерфейс создается с использованием виджетов Flutter.
• Приложение может быть запущено как настольное или веб-приложение.
• Flet предоставляет многие базовые виджеты для создания приложения.

Часть 2. Практика. Форма регистрации​

Начнем создание нашего приложения. Для начала создадим самый базовый (необходимый) шаблон:

import flet as ft

def main(page: ft.Page):
pass

ft.app(target=main)

Python

import flet as ft



def main(page: ft.Page):

    pass



ft.app(target=main)

Данное приложение будет открываться как отдельное окно, но Flet можно открыть в новом окне браузера, заменив последнюю строчку кода на эту: ft.app(target=main, view=ft.AppView.WEB_BROWSER). В данный момент наше приложение пустое (если точнее, то с бесконечной загрузкой). Сразу хочу отметить, что мы будем делать очень простую и при этом интересную программу, для полного функционирования которой, потребуется включить работы с базой данных — это форма регистрации.

Давайте добавим в нашу программу формы для заполнения - делается это очень просто:

page.add(
ft.Row(controls=[
ft.TextField(label="Надпись в текстовом поле"),
ft.ElevatedButton(text="Текст кнопки")
])
)

Python

page.add(

    ft.Row(controls=[

        ft.TextField(label="Надпись в текстовом поле"),

        ft.ElevatedButton(text="Текст кнопки")

    ])

)

Но! Нам необходимо 3 таких формы, поэтому мы сделаем все намного проще и заодно добавим обработчик нажатия кнопки, приветствие пользователя и объединенную кнопку:

import flet as ft


def main(page):

# Создаем "объекты"
first_name = ft.Ref[ft.TextField]()
last_name = ft.Ref[ft.TextField]()
patronymic = ft.Ref[ft.TextField]()
greetings = ft.Ref[ft.Column]()

# Обработчик нажатия кнопки
def btn_click(e):
greetings.current.controls.append(
ft.Text(f"Добро пожаловать, {first_name.current.value} {patronymic.current.value} {last_name.current.value}!")
) # Когда кнопка нажата, мы здороваемся с пользователем по заданным данным

# Очищаем все данные, введенные пользователем
first_name.current.value = ""
last_name.current.value = ""
patronymic.current.value = ""
page.update() # Обязательно "сохраняем" изменения на странице

page.add(
# Создаем текстовые поля, для удобства ставим автофокус на первое поле
ft.TextField(ref=first_name, label="Ваше имя", autofocus=True),
ft.TextField(ref=last_name, label="Ваша фамилия"),
ft.TextField(ref=patronymic, label="Ваше отчество"),
# Создаем кнопку, обработчиком которой будет функция, указанная в on_click
ft.ElevatedButton("Зарегистрироваться", on_click=btn_click),
ft.Column(ref=greetings),
)

ft.app(target=main)

Python

import flet as ft





def main(page):



    # Создаем "объекты"

    first_name = ft.Ref[ft.TextField]()

    last_name = ft.Ref[ft.TextField]()

    patronymic = ft.Ref[ft.TextField]()

    greetings = ft.Ref[ft.Column]()



    # Обработчик нажатия кнопки

    def btn_click(e):

        greetings.current.controls.append(

            ft.Text(f"Добро пожаловать, {first_name.current.value} {patronymic.current.value} {last_name.current.value}!")

        ) # Когда кнопка нажата, мы здороваемся с пользователем по заданным данным



        # Очищаем все данные, введенные пользователем

        first_name.current.value = ""

        last_name.current.value = ""

        patronymic.current.value = ""

        page.update() # Обязательно "сохраняем" изменения на странице



    page.add(

        # Создаем текстовые поля, для удобства ставим автофокус на первое поле

        ft.TextField(ref=first_name, label="Ваше имя", autofocus=True),

        ft.TextField(ref=last_name, label="Ваша фамилия"),

        ft.TextField(ref=patronymic, label="Ваше отчество"),

        # Создаем кнопку, обработчиком которой будет функция, указанная в on_click

        ft.ElevatedButton("Зарегистрироваться", on_click=btn_click),

        ft.Column(ref=greetings),

    )



ft.app(target=main)

Скриншоты результатов

Обязательно читайте комментарии в коде - я специально их пишу, чтобы вы понимали, что я делаю — именно это и есть теоретическая часть темы. Давайте теперь добавим немного визуальной части: размеры окна, текст, тема:

Как задать размеры окна

page.window_width = 400 # Задаем ширину окна
page.window_height = 400 # Задаем высоту окна
page.window_resizable = False # Запрещаем изменять размеры окна
page.update()

Python

page.window_width = 400 # Задаем ширину окна

page.window_height = 400 # Задаем высоту окна

page.window_resizable = False # Запрещаем изменять размеры окна

page.update()

Как добавить на страницу текст

page.add(
ft.Text("Форма регистрации.", size=25, weight=ft.FontWeight.BOLD,), # Создаем текст, задаем размер, делаем его толстым
)

Python

page.add(

        ft.Text("Форма регистрации.", size=25, weight=ft.FontWeight.BOLD,), # Создаем текст, задаем размер, делаем его толстым

    )

Как задать цветовую тему страницы

page.theme = theme.Theme(color_scheme_seed='green') # Задаем зеленую тему
page.update() # Обязательно "сохраняем" изменения на странице

Python

page.theme = theme.Theme(color_scheme_seed='green') # Задаем зеленую тему

page.update() # Обязательно "сохраняем" изменения на странице

Вот, что получилось в итоге всех изменений:

import flet as ft
from flet import theme

def main(page):
page.window_width = 400 # Задаем ширину окна
page.window_height = 400 # Задаем высоту окна
page.window_resizable = False # Запрещаем изменять размеры окна
page.update()

# Создаем "объекты"
first_name = ft.Ref[ft.TextField]()
last_name = ft.Ref[ft.TextField]()
patronymic = ft.Ref[ft.TextField]()
greetings = ft.Ref[ft.Column]()

# Обработчик нажатия кнопки
def btn_click(e):
greetings.current.controls.append(
ft.Text(f"Добро пожаловать, {first_name.current.value} {patronymic.current.value} {last_name.current.value}!")
) # Когда кнопка нажата, мы здороваемся с пользователем по заданным данным
# Вы можете делать с данными, которые получили что хотите - вносить их в базы данных и тд.

# Очищаем все данные, введенные пользователем
first_name.current.value = ""
last_name.current.value = ""
patronymic.current.value = ""
page.update() # Обязательно "сохраняем" изменения на странице

page.add(
ft.Text("Форма регистрации.", size=25, weight=ft.FontWeight.BOLD,), # Создаем текст, задаем размер, делаем его толстым
# Создаем текстовые поля, для удобства ставим автофокус на первое поле
ft.TextField(ref=first_name, label="Ваше имя", autofocus=True),
ft.TextField(ref=last_name, label="Ваша фамилия"),
ft.TextField(ref=patronymic, label="Ваше отчество"),
# Создаем кнопку, обработчиком которой будет функция, указанная в on_click
ft.ElevatedButton("Зарегистрироваться", on_click=btn_click),
ft.Column(ref=greetings),
)

page.theme = theme.Theme(color_scheme_seed='green') # Задаем зеленую тему
page.update() # Обязательно "сохраняем" изменения на странице

Python

import flet as ft

from flet import theme



def main(page):

    page.window_width = 400 # Задаем ширину окна

    page.window_height = 400 # Задаем высоту окна

    page.window_resizable = False # Запрещаем изменять размеры окна

    page.update()



    # Создаем "объекты"

    first_name = ft.Ref[ft.TextField]()

    last_name = ft.Ref[ft.TextField]()

    patronymic = ft.Ref[ft.TextField]()

    greetings = ft.Ref[ft.Column]()



    # Обработчик нажатия кнопки

    def btn_click(e):

        greetings.current.controls.append(

            ft.Text(f"Добро пожаловать, {first_name.current.value} {patronymic.current.value} {last_name.current.value}!")

        ) # Когда кнопка нажата, мы здороваемся с пользователем по заданным данным

        # Вы можете делать с данными, которые получили что хотите - вносить их в базы данных и тд.



        # Очищаем все данные, введенные пользователем

        first_name.current.value = ""

        last_name.current.value = ""

        patronymic.current.value = ""

        page.update() # Обязательно "сохраняем" изменения на странице



    page.add(

        ft.Text("Форма регистрации.", size=25, weight=ft.FontWeight.BOLD,), # Создаем текст, задаем размер, делаем его толстым

        # Создаем текстовые поля, для удобства ставим автофокус на первое поле

        ft.TextField(ref=first_name, label="Ваше имя", autofocus=True),

        ft.TextField(ref=last_name, label="Ваша фамилия"),

        ft.TextField(ref=patronymic, label="Ваше отчество"),

        # Создаем кнопку, обработчиком которой будет функция, указанная в on_click

        ft.ElevatedButton("Зарегистрироваться", on_click=btn_click),

        ft.Column(ref=greetings),

    )



    page.theme = theme.Theme(color_scheme_seed='green') # Задаем зеленую тему

    page.update() # Обязательно "сохраняем" изменения на странице

Скриншоты результатов

Наше приложение заметно изменилось - в нем появилось приятное оформление и небольшой функционал. Давайте добавим поле с вводом почты - к нему мы добавим характерный смайлик письма:

import flet as ft
from flet import theme

def main(page):
page.window_width = 450 # Задаем ширину окна
page.window_height = 470 # Задаем высоту окна
page.window_resizable = False # Запрещаем изменять размеры окна
page.update()

# Создаем "объекты"
first_name = ft.Ref[ft.TextField]()
last_name = ft.Ref[ft.TextField]()
patronymic = ft.Ref[ft.TextField]()
email = ft.Ref[ft.Column]()
greetings = ft.Ref[ft.Column]()


# Обработчик нажатия кнопки
def btn_click(e):
greetings.current.controls.append(
ft.Text(f"Добро пожаловать, {first_name.current.value} {patronymic.current.value} {last_name.current.value}!")
) # Когда кнопка нажата, мы здороваемся с пользователем по заданным данным
# Вы можете делать с данными, которые получили что хотите - вносить их в базы данных и тд.

# Очищаем все данные, введенные пользователем
first_name.current.value = ""
last_name.current.value = ""
patronymic.current.value = ""
email.current.value = ""
page.update() # Обязательно "сохраняем" изменения на странице

page.add(
ft.Text("Форма регистрации.", size=25, weight=ft.FontWeight.BOLD,), # Создаем текст, задаем размер, делаем его толстым
# Создаем текстовые поля, для удобства ставим автофокус на первое поле
ft.TextField(ref=first_name, label="Ваше имя", autofocus=True),
ft.TextField(ref=last_name, label="Ваша фамилия"),
ft.TextField(ref=patronymic, label="Ваше отчество"),
ft.TextField(ref=email, label="Адрес электронной почты", icon=ft.icons.EMAIL), # Спец.параметр icon
# Создаем кнопку, обработчиком которой будет функция, указанная в on_click
ft.ElevatedButton("Зарегистрироваться", on_click=btn_click),
ft.Column(ref=greetings),
)

page.theme = theme.Theme(color_scheme_seed='green') # Задаем зеленую тему
page.update() # Обязательно "сохраняем" изменения на странице

ft.app(target=main)

Python

import flet as ft

from flet import theme



def main(page):

    page.window_width = 450 # Задаем ширину окна

    page.window_height = 470 # Задаем высоту окна

    page.window_resizable = False # Запрещаем изменять размеры окна

    page.update()



    # Создаем "объекты"

    first_name = ft.Ref[ft.TextField]()

    last_name = ft.Ref[ft.TextField]()

    patronymic = ft.Ref[ft.TextField]()

    email = ft.Ref[ft.Column]()

    greetings = ft.Ref[ft.Column]()

 



    # Обработчик нажатия кнопки

    def btn_click(e):

        greetings.current.controls.append(

            ft.Text(f"Добро пожаловать, {first_name.current.value} {patronymic.current.value} {last_name.current.value}!")

        ) # Когда кнопка нажата, мы здороваемся с пользователем по заданным данным

        # Вы можете делать с данными, которые получили что хотите - вносить их в базы данных и тд.



        # Очищаем все данные, введенные пользователем

        first_name.current.value = ""

        last_name.current.value = ""

        patronymic.current.value = ""

        email.current.value = ""

        page.update() # Обязательно "сохраняем" изменения на странице



    page.add(

        ft.Text("Форма регистрации.", size=25, weight=ft.FontWeight.BOLD,), # Создаем текст, задаем размер, делаем его толстым

        # Создаем текстовые поля, для удобства ставим автофокус на первое поле

        ft.TextField(ref=first_name, label="Ваше имя", autofocus=True),

        ft.TextField(ref=last_name, label="Ваша фамилия"),

        ft.TextField(ref=patronymic, label="Ваше отчество"),

        ft.TextField(ref=email, label="Адрес электронной почты", icon=ft.icons.EMAIL), # Спец.параметр icon

        # Создаем кнопку, обработчиком которой будет функция, указанная в on_click

        ft.ElevatedButton("Зарегистрироваться", on_click=btn_click),

        ft.Column(ref=greetings),

    )



    page.theme = theme.Theme(color_scheme_seed='green') # Задаем зеленую тему

    page.update() # Обязательно "сохраняем" изменения на странице



ft.app(target=main)

Скриншоты результатов

Часть 3. Выводы.
​

Данная статья была обозревательной - у фреймворка есть еще куча возможностей, о которых я не сказал. Надеюсь вам понравилась статья - она полностью авторская, я очень старался сделать что-то интересное и полезное. Спасибо за уделенное время, по своим ощущениям хочу сказать, что фреймворк довольно простой, есть удобная документация (https://flet.dev/docs/), но, к сожалению, кроме нее - ничего, никаких источников. Я думаю, этот фреймворк будет развиваться и попробовать его точно стоит!
Весь код доступен выше или по ссылке: https://dpaste.com/4YZ3KGL3C