[Python] Fletとは

Fletとは

• フロントエンド開発の経験がなくても、好みの言語で開発可能なフレームワーク
  • インタラクティブなマルチユーザWeb
  • デスクトップ
  • モバイルアプリケーション
• Flutter by Google に基づくFlet Controls を用いてプログラムのUIを構築
  • Flutterウィジェットをラップするだけでなく独自の意見を追加
    • 小さなウィジェットを組み合わせる
    • 複雑さを隠す
    • UIのベストプラクティスを実装
    • 合理的なデフォルトを適用

Flet app example

• 現在はPythonでFletアプリを書くことが可能
  • 他の言語も近々追加予定

ライブラリ追加

# pipの場合
$ pip install flet
# poetryの場合
$ poetry add flet

実装例

#!/usr/bin/env python3
# -*- coding: utf_8 -*-
"""flet実装例
"""

import flet as ft


def main(page: ft.Page):
    """実行ターゲット

    Args:
        page (ft.Page): ページのインスタンス
    """
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    txt_number: ft.TextField = ft.TextField(
        value="0", text_align=ft.TextAlign.RIGHT, width=100
    )

    minus_click = get_minus_click(page, txt_number)
    plus_click = get_plus_click(page, txt_number)

    page.add(
        ft.Row(
            [
                ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
                txt_number,
                ft.IconButton(ft.icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )


def get_minus_click(page: ft.Page, txt_number: ft.TextField):
    """テキストの値を-1するボタンの処理を返す

    Args:
        page (ft.Page): ページのインスタンス
        txt_number (ft.TextField): 数字のテキストインスタンス
    Returns:
        テキストの値を-1してページを更新する処理
    """

    def minus_click(e):
        txt_number.value = str(int(txt_number.value) - 1)
        page.update()

    return minus_click


def get_plus_click(page: ft.Page, txt_number: ft.TextField):
    """テキストの値を+1するボタンの処理を返す

    Args:
        page (ft.Page): ページのインスタンス
        txt_number (ft.TextField): 数字のテキストインスタンス
    Returns:
        テキストの値を+1してページを更新する処理
    """

    def plus_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

    return plus_click


if __name__ == "__main__":

    # OSのネイティブウィンドウで起動
    ft.app(target=main)

    # Webブラウザで起動
    # ft.app(target=main, view=ft.WEB_BROWSER)

参考

• Flutter
• Flet