Fletアプリにプログレスバーを付ける

はじめに

Flet、すごく便利です。
クロスプラットフォームなアプリを作れるのはもちろんですが、ちょっとしたローカルデスクトップアプリを作るときにも十分実用的です。この記事では、Fletアプリでプログレスバーを実装する方法をかんたんに記載します。

Note

PythonやFletはインストールされている前提となります。
記事内のコードは以下の環境で動作確認しています。

• Windows 10
• Ubuntu Desktop 22.04.2 LTS
• Python 3.10.4

やりたいこと

• 実行前
  

• 実行中（これ！）
  

• 実行後
  

超シンプルですね。
ファイルを指定して何らかの処理を実行するだけのアプリです。

上記のスクリーンショット画像では背景色が黒ですが、背景色は実行する環境（OS）のアピアランス設定に依存します。

フローを箇条書するとこんな感じでしょうか。

• ファイルを指定する
• [実行] ボタンをクリックする
• プログレスバーが表示される
• 処理後に「完了!」と表示され、プログレスバーが非表示となる

コード

import flet as ft
from pathlib import Path
import time


def do_something():
    time.sleep(5)

def main(page):
    dir_path = ft.TextField(label="ファイル", autofocus=True)
    done = ft.Column()
    
    # プログレスバーの設定
    progress = ft.ProgressBar(width=400, color="pink", bgcolor="#eeeeee")

    def btn_click(e):
        # プログレスバーを表示する
        page.add(
            progress
        )
        
        # 何らかの処理
        do_something()
        
        # プログレスバーを非表示にする
        page.remove(progress)
        
        # 完了メッセージ
        done.controls.append(ft.Text(value="完了!"))
        
        page.update()
        dir_path.focus()
        
    page.add(
        dir_path,
        ft.ElevatedButton("実行", on_click=btn_click),
        done,
    )

ft.app(target=main)

コードも超シンプルです。プログレスバーの書式設定も直感的にわかるかなと思います。

実際にはもっとあれこれ処理を書くことになると思いますが、簡易なものであればこのコードの do_something() を書き換えるだけで使いまわしが利きそうです。

これなら、重い処理をするアプリにプログレスバーを実装するのもかんたんですよね。

おわりに

今回はデスクトップアプリとして（不定な）プログレスバーを実装する簡易なサンプルを紹介しました。
これをWebアプリにすることもできるというのがまたすごいところですね。正直、個人的にはもっと何年も前に欲しかったライブラリです。

最初はFletについて、ChatGPT Plusでも色々やってみようと思ったんです。でも全然ダメでした。まだ新しいライブラリなので、Chat GPTには情報がないようです。しれっとFlaskのコードを出してきたりしましたからね。

公式のドキュメントもQiitaの記事も、とてもわかりやすくて助かりました。

参考