【Python】venvでFlet開発環境を秒速構築&簡易アプリ作成してみた【Flutter】

python版Flutter「Flet」で簡易アプリを作っていみた

Fletとはなにか?

Pythonを使ってFlutterアプリを構築できるフレームワークです。

Flet公式サイト

Flutterは、Googleが開発したDartという言語を使ってアプリを構築します。そしてこのFlutterは、様々なデバイス(Android・iOS・Mac・Windows・Linux)に対応可能なクロスプラットフォームアプリ開発が実現できます。

Fletでは上述のようにFlutter開発が可能であり、かつPythonという書き味鋭い言語と豊富なライブラリ・モジュールを用いるため開発もかなり捗るかと思われます。

それではまず開発環境を整えてから実際にFletをインストールしサンプルコードを書いて実行していきたいと思います。

Flet用に仮想環境を構築する

下記リンクを参照し、venv仮想環境を構築しましょう。

【簡単Python】venvでサクッと仮想環境を用意してみる【Mac開発環境構築】

上記リンク先の「仮想環境を起動させる」ところまで作業が進んだら、こちらへ戻って先を進めます。

Fletをインストールする

flet_testという名前の仮想環境で進めていきます。仮想環境内を起動させます。

$ source flet_test/bin/activate
(flet_test) $ pip3 install flet

上記のように「pip」や「pip3」で「Flet」をインストールします。

Fletのサンプルコードを書いてみる

下記のようによくある「Hello, world!」的なやつを書いてmain.pyを実行してみます。

ディレクトリ構成は下記画像参照。

Flet仮想環境のディレクトリ構成

import flet
from flet import Page, Text

def main(page: Page):
    page.add(Text("( =^ω^)にゃんにゃんお!"))

flet.app(target=main)

Fletフレームワークを使ってpythonでFlutterアプリを作成する

Fletで簡単なアプリを作成する

Fletの公式サイトでカウンターアプリがサンプルで紹介されていたので、少しデザインを弄ってみた。

公式の完成形は下記画像のようになる。

Flet公式サイトのカウンターアプリのサンプル

上記を参考にしたコードがこちら。

import flet as ft

def main(page: ft.Page):
    app_title = "カウンター出力"
    page.title = app_title

    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    txt_number = ft.TextField(
      color=ft.colors.BLACK,
      border_radius=10,
      border=ft.InputBorder.NONE,
      value="0",
      text_align=ft.TextAlign.CENTER
    )

    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.Column(
            [
                ft.Text(
                    app_title
                )
            ]
        ),
        ft.Row(
            [
                ft.IconButton(
                  ft.icons.REMOVE,
                  bgcolor=ft.colors.CYAN_200,
                  on_click=minus_click
                  ),
                ft.Container(
                    content=txt_number,
                    margin=10,
                    padding=10,
                    alignment=ft.alignment.center,
                    bgcolor=ft.colors.INDIGO_50,
                    border_radius=10,
                    ink=True
                ),
                ft.IconButton(
                  ft.icons.ADD,
                  bgcolor=ft.colors.AMBER,
                  on_click=plus_click
                  ),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )

ft.app(target=main)

色コードがよくわからなかったので下記のアプリを使わせていただきました。

Fletの色選択アプリ

下記のようになりました。

Flet(python版Flutter)で作成したカウンターアプリ

この他にもいくつか作りましたが、作っていてとても楽しいと感じるフレームワークでした。

これからFletでアプリを作って、Macを新調したらストアに公開していきたいと思います。

About Naoki 24 Articles
デザインを含めたフロントエンドから、インフラ含めたバックエンドまで広く浅く活動しているエンジニアです。主にSaasの開発・営業・運営管理などをしております。毎日デスマーチがモットーなブラックエンジニアです。 私が管理しているクラウドソフトウェアがこちらです→まとめツール倶楽部『MTCsystem』

Be the first to comment

Leave a Reply

Your email address will not be published.


*


CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)