Flet : イントロダクション

作成 : クラスキャット セールスインフォメーション
作成日時 : 05/07/2024

* 本ページは、flet.dev の以下のページを独自に翻訳して、適宜、補足説明したものです ：

• Introduction

* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。

Flet : イントロダクション

Flet とは何か？

Flet は、フロントエンド開発の事前の経験なしに、Python で web, デスクトップやモバイルアプリケーションを構築することを可能にするフレームワークです。

Google の Flutter に基づいた Flet の コントロール を使用して、貴方のプログラムの UI を構築することができます。Flet は Flutter ウィジェットを単にラップする以上のことができます。小さいウィジェットを組み合わせ、複雑さを簡素化し、UI ベストプラクティスを実装し、そして実用的なデフォルトを適用することで、独自のタッチを追加します。これは、貴方のパートで追加のデザインの労力を必要とすることなしにアプリケーションがスタイリッシュで洗練された外観になることを保証します。

Flet アプリケーションサンプル

サンプル “Counter” アプリケーションを作成します :

counter.py

import flet as ft

def main(page: ft.Page):
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

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

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

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

    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,
        )
    )

ft.app(main)

 
アプリケーションを実行するには、flet モジュールをインストールします ( 新しい Flet 環境の作成 ) :

pip install flet

そして プログラムを実行します :

flet run counter.py

アプリケーションはネイティブ OS ウィンドウで開始されます – what a nice alternative to Electron!

macOS	Windows

Now, run your app as a web app:

flet run --web counter.py

新しいブラウザ・ウィンドウかタブがオープンされます :

以上