Flet : Getting started / 新しい Flet app の作成 / Flet app の実行

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

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

• Getting started
• Create a new Flet app
• Running Flet app

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

 

 

 

Flet : Getting started

最初の Flet app を作成できるようにするためには、開発環境をセットアップする必要があります、これは Python 3.8 またはそれ以上と flet パッケージが必要です。

Flet を仮想環境にインストールすることを勧めます、これはいくつかの様々な方法で行われます。

 

要件

Linux

Flet を Linux 上にインストールする場合、追加の要件 があります。

 

WSL

Flet apps は WSL 2 (Windows Subsystem for Linux 2) で実行できます。

“cannot open display” エラーを得ている場合には、トラブルシューティングのために このガイドに従ってください。

 

Python venv モジュール

端末で以下のコマンドを実行することで仮想環境を作成できます :

macOS / Linux

mkdir first-flet-app
cd first-flet-app
python3 -m venv .venv
source .venv/bin/activate

Windows

md first-flet-app
cd first-flet-app
python -m venv .venv
.venv\Scripts\activate

仮想環境をアクティベートすると、プロンプトが (.venv) prefix を示すようになることが確認できるでしょう。

これで Flet の最新版を .venv 仮想環境にインストールできます :

pip install flet

To check what version of Flet was installed:

flet --version

Python venv モジュールについては ここで 更に読むことができます。

これで最初の Flet app を作成する準備ができました。

 

Poetry

Flet プロジェクト用の仮想環境をセットアップする別の方法は Poetry を使用することです。

Poetry を インストール したら、端末で次のコマンドを実行します :

poetry new first-flet-app

このコマンドは、以下の構造を持つ first-flet-app という名前の新しいディレクトリを作成します :

first-flet-app/
├── pyproject.toml
├── README.md
├── first-flet-app/
│   └── __init__.py
└── tests/
    └── __init__.py

ここで Flet の依存関係をプロジェクトに追加することができます :

cd first-flet-app
poetry add flet

To check what version of Flet was installed:

poetry run flet --version

Now you are ready to create your first Flet app.

⭐️ NOTE : When creating and running Flet app using Poetry, you’ll need to use poetry run before each command!

 

Flet : 新しい Flet app の作成

新しい 「最小限の」 Flet app を作成するには次のコマンドを実行します :

flet create <project-name>

例えば :

flet create my_flet_app

<project-name> は出力ディレクトリの名前として使用されます。

Flet は以下の main.py を含む <project-name> ディレクトリを作成します :

import flet as ft

def main(page: ft.Page):
    page.add(ft.SafeArea(ft.Text("Hello, Flet!")))

ft.app(main)

⭐️ NOTE : Flet app を current ディクレクトリ内に作成するには、次のコマンドを実行します :

flet create .

Flet プログラムは main() 関数を含み、ここで UI 要素 (コントロール) をページまたはウィンドウに追加します。アプリケーションはブロッキング ft.app() 関数で終了します、これは Flet app を初期化して main() を実行します。

新しい flet app を “counter” テンプレートから作成するには、以下のコマンドを実行します :

flet create --template counter <project-name>

あるいは、現在のディレクトリで counter テンプレートから Flet app を作成するには、このコマンドを実行します :

flet create --template counter .

“flet create” コマンドの詳細な情報は ここで 見つけられます。

Now let’s see Flet in action by running the app!

cd first-flet-app
poetry add flet

 

Flet : Flet app の実行

Flet app は、単一の flet run コマンドを使用してデスクトップまたは　　web app として実行できます。

 

デスクトップ app として実行する

Flet app をデスクトップ app として実行するには、次のコマンドを実行します :

flet run

このコマンドは current ディクレクトリにある main.py を実行します。

ファイルへの別のパスを供給する必要がある場合は、次のコマンドを使用します :

flet run [script]

別のディレクトリにある main.py を実行するには、それがあるディレクトリへの絶対または相対パスを供給します、例えば :

flet run /Users/JohnSmith/Documents/projects/flet-app

main.py 以外の名前のスクリプトを実行するには、そのファイルへの絶対または相対パスを供給します、例えば :

flet run counter.py

The app will be started in a native OS window:

macOS	Windows

 

web app として実行する

Flet app を web app として実行するには、次のコマンドを使用します :

flet run --web [script]

新しいブラウザ・ウィンドウ/タブがオープンされ、app はランダムな TCP ポートを使用します　:

To run on a fixed port use –port (-p) option, for example:

flet run --web --port 8000 app.py

 

ホット・リロード

デフォルトでは、Flet は実行されたスクリプトファイルを監視していて、ファイルが変更されて保存されたときにいつでも　app をリロードしますが、他のファイルの変更は監視していません。

同じディレクトリのすべてのファイルを監視するには、次のコマンドを使用します :

poetry run flet run -d [script]

To watch script directory and all sub-directories recursively, use the following command:

poetry run flet run -d -r [script]

You can find more information about flet run command here.

以上