Raspberry Pi 4でFlutterを使ってみる

今回もFlutterの開発環境をRaspberry Pi4 ＋ Ubuntuで構築します。

最初に言っておくと、「動きはするが微妙な感じ」でした。

・Flutter SDKのインストール
・Code Serverの設定
・Flutter Projectの作成
・終わり
・余談

・Flutter SDKのインストール

公式サイトのGet Startedを参考に、Flutterのsnapを使用してインストールします。

sudo snap install flutter --classic
flutter sdk-path

1 2	sudo snap install flutter --classic flutter sdk-path

インストール完了後、下記コマンドを実行してコンポーネントを確認します

flutter doctor

1	flutter doctor

実行例ではChromeとFlutter IDEが入ってない旨の警告が出ました。

&#91;✓] Flutter (Channel master, 2.3.0-13.0.pre.145, on Ubuntu 20.04.2 LTS 5.4.0-1035-raspi, locale C.UTF-8)
&#91;✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chro
me executable.
&#91;✗] Flutter IDE Support (No supported IDEs installed)

[✓] Flutter (Channel master, 2.3.0-13.0.pre.145, on Ubuntu 20.04.2 LTS 5.4.0-1035-raspi, locale C.UTF-8)

[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)

! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chro

me executable.

[✗] Flutter IDE Support (No supported IDEs installed)

今回はCode Serverでやるつもりなのと、外部からChromeでアクセスできなかったので今回はWebアプリとして開発します。

再度、flutter doctorを実行してみます。
Chromeの欄にチェックが入ったので次の項目へ

&#91;✓] Flutter (Channel master, 2.3.0-13.0.pre.145, on Ubuntu 20.04.2 LTS 5.4.0-1035-raspi, locale C.UTF-8)
&#91;✓] Chrome - develop for the web
&#91;✗] Flutter IDE Support (No supported IDEs installed)
&#91;✓] Connected device (1 available)

[✓] Flutter (Channel master, 2.3.0-13.0.pre.145, on Ubuntu 20.04.2 LTS 5.4.0-1035-raspi, locale C.UTF-8)

[✓] Chrome - develop for the web

[✗] Flutter IDE Support (No supported IDEs installed)

[✓] Connected device (1 available)

Flutter SDKのパスを設定します。Flutterのパスは下記のコマンドで確認します

flutter sdk-path

1	flutter sdk-path

先ほど確認したFlutter SDKのパスを永続化します

sudo vim $HOME/.bashrc

1	sudo vim $HOME/.bashrc

ファイルの内容は下記のとおりです。

# ファイルの末尾に追加
export PATH="$PATH:/home/ubuntu/snap/flutter/common/flutter/bin"

1 2	# ファイルの末尾に追加 export PATH="$PATH:/home/ubuntu/snap/flutter/common/flutter/bin"

編集完了後、下記のコマンドでパスを更新します。

source $HOME/.bashrc

1	source $HOME/.bashrc

今回はLinuxにインストールするので念のため、デスクトップ要件のサポートを有効にします。

sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev
flutter config --enable-linux-desktop

1 2	sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev flutter config --enable-linux-desktop

・Code Serverの設定

Flutterの拡張機能をインストールします

拡張機能インストール後、「Ctrl+Shift+P」でコマンドパレット呼び出して下記コマンドを実行します
内容自体はターミナルで実行したflutter doctorと同じ内容が出るはずです。


Flutter：Run FlutterDoctor

1 2	Flutter：Run FlutterDoctor

・Flutter Projectの作成

コマンドパレットを呼び出して「Flutter: New Application Project」を実行します。
今回は/home/ubuntu/flutter/直下にdefault名のflutter_applcation_1で作成しました。
main.dartが表示されたら、プロジェクトの作成が完了です。

Flutterでサーバを立てて実行した場合、localhostからしかアクセスできないので、外部から見れるようにします。
（ちなみに、ここがRaspberry Pi4で環境構築するときに情報がなくてハマりました。）
今回はapache2を使用します。apache2のインストールについてはこちらを参考にしてください。

本当は設定した方がいいのでしょうが、今回は動作確認だけなので消します。/web/index.htmlの下記の一文をコメントアウトします。
この一文があると、http://IPアドレス/直下を見に行ってしまい、404が返ってきます。

&lt;base href="$FLUTTER_BASE_HREF"&gt;

1	<base href="$FLUTTER_BASE_HREF">

Code Serverのターミナルから下記のコマンドを実行してプロジェクトをビルドします。

flutter build web

1	flutter build web

/build/webフォルダができていることが確認出来たら、ドキュメントルートにシンボリックリンクを作成します。
今回は/var/www/htmlをドキュメントルートに設定しているので/var/www/html/flutterでリンクを作成します。

sudo ln -s /home/ubuntu/flutter/flutter_application_1/build/web /var/www/html/flutter

1	sudo ln -s /home/ubuntu/flutter/flutter_application_1/build/web /var/www/html/flutter

ここまで出来たら実際にhttp://IPアドレス/flutter/にアクセスして動作を確認します。
画像の画面が表示されたら環境構築完了です。（表示まですこし時間がかかる場合があります）

・終わり

構築してみた感想としては、Code Serverでやるものじゃないなというのが素直な感想です。
Web Serverでやろうにも外部からアクセスできず、デバッグ実行もできないので、ローカルに直接構築するか、Dockerでやった方がいいのかなという感じでした。
やり方が間違っているのかもしれないですが、Code ServerではChromeやAndoridのアプリのデバッグも出来ませんでした。
Remote DevelopmentだとFirefoxのみWeb Serverのデバッグでも表示できました。
とはいえ、ラズパイでも動作することが分かったのは収穫でした。

では、この辺で。

三条　海斗

・余談

ちなみにFlutterを使わないプレーンのDartならデバッグ実行できました。