Fletでdesktopアプリ作成に挑戦！

日経ソフトウエアの「Fletでdesktopアプリを作ろう（2025年5月号）」という記事が面白そうなので挑戦してみます。　
最終的にはここwebで動作するようにしたいと思ってます。

# まず簡単な挨拶代わりのcode

import flet as ft　

def main(page):
page.title = "Hello, Flet Normy!" # ページのタイトル
page.add(ft.Text(value="Welcome to First Flet!"))

# テキスト追加（visible=False or False）, 
t = ft.Text(value="Hello, Flet World!", color="green", visible=True)
page.add(t)

# 次の様に表示される
#"Welcome to First Flet!"
#"Hello, world!"

ft.app(target=main) # targetが無くても動作する

このcodeを走らせると次の表示が出ます。

♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠♠

次は花ゲームのcodeを書きますが、chatGPTを使いながら完成しました。
まだweb版にはなっていません。

# 花クイズ(Flet使用).py  6/1/2025
# pageの着色色合わせ有り

import flet as ft
import os
import random
import base64

def main(page: ft.Page):
    page.title = "Flower Quiz ver3.0a"
    page.padding = 20
    page.bgcolor = "#FFFDE7"  # やさしい黄色背景

    image_folder = "flower_holder"
    image_files = [os.path.join(image_folder, f) for f in os.listdir(image_folder)
                   if f.lower().endswith(('.png', '.jpg', '.jpeg', '.gif'))]

    flower_image = ft.Image(width=200, height=200, visible=False)
    flower_name = ft.Text("", size=18, weight="bold", color="#3E2723")

    button1 = ft.ElevatedButton(text=" ", width=250, bgcolor="#E1F5FE", color="#0D47A1")
    button2 = ft.ElevatedButton(text=" ", width=250, bgcolor="#E1F5FE", color="#0D47A1")
    button3 = ft.ElevatedButton(text=" ", width=250, bgcolor="#E1F5FE", color="#0D47A1")
    button4 = ft.ElevatedButton(text=" ", width=250, bgcolor="#E1F5FE", color="#0D47A1")

    choice_buttons = [button1, button2, button3, button4]
    correct_flower = ft.Text(" ", visible=False)

    def image_to_base64(path):
        with open(path, "rb") as f:
            return base64.b64encode(f.read()).decode("utf-8")

    def start_quiz(e):
        if not image_files:
            page.snack_bar = ft.SnackBar(ft.Text("画像が見つかりません"))
            page.snack_bar.open = True
            page.update()
            return

        random_image = random.choice(image_files)
        img_base64 = image_to_base64(random_image)
        flower_image.src_base64 = img_base64
        flower_image.visible = True

        correct = os.path.splitext(os.path.basename(random_image))[0]
        correct_flower.value = correct
        flower_name.value = ""

        options = random.sample(image_files, 4)
        correct_index = random.randint(0, 3)
        options[correct_index] = random_image

        for i in range(4):
            name = os.path.splitext(os.path.basename(options[i]))[0]
            choice_buttons[i].text = name
            choice_buttons[i].on_click = check_answer

        page.update()

    def check_answer(e):
        if e.control.text == correct_flower.value:
            flower_name.value = f"✅ 正解！「{correct_flower.value}」です"
            flower_name.color = "#2E7D32"  # 緑色
        else:
            flower_name.value = f"❌ 不正解... 正解は「{correct_flower.value}」です"
            flower_name.color = "#C62828"  # 赤色
        page.update()

    page.add(
        ft.Text("🌼 花クイズ 🌸", size=30, weight="bold", color="#6A1B9A"),
        flower_image,
        ft.Container(flower_name, padding=10),
        ft.Column(choice_buttons, spacing=10),
        ft.Row([
            ft.ElevatedButton("開始/次へ", on_click=start_quiz, bgcolor="#4CAF50", color="white"),
            ft.ElevatedButton("終了", on_click=lambda e: page.window_close(), bgcolor="#B0BEC5"),
        ]),
        #ft.Text("Tak ver 3.0_2024", size=12, italic=True, color="#757575")
    )

ft.app(target=main)

上記のcodeは次のような[花ゲーム]が楽しめます。web版の一歩手前です。