Flutter の開発環境を Docker で作ってみた
Flutter を触ってみたくて Flutter の開発環境を Docker で作ってみました。
Docker
作った Docker は以下のリポジトリに入れています。
c-a-p-engineer/docker-flutter
使用したDocker Image
- dorowu/ubuntu-desktop-lxde-vnc | Docker Hub
大本の Docker Image は以前、以下の記事で紹介したものです。
【Docker】Ubuntuでリモートデスクトップ
使用方法
README.md に記載していますが、以下のコマンドだけで開発完了を作れます。
docker-compose up -d --build
サンプルまで作る
Docker 内に入る。
docker exec -it flutter bash
もしくは以下のURLに接続して作業します。（ターミナルを開いてください）
- 作業ディレクトリ
cd /src
2.サンプル作成
flutter サンプルを作成
flutter create .
3.サンプル起動
port:55555 でサーバー起動
flutter run -d web-server --web-port 55555 --web-hostname 0.0.0.0
4.build
flutter build web
ビルドしたファイルはアップする事で実際にWebにアップすることで使用することが出来ます。
Flutter Demo
Andoroid用の設定
Androidの設定
以下の設定を有効にするとAndoroid Studioをインストールします。.env.example → .envINSTALL_ANDROID=true
2.Andoroid Studioの起動
Docker build後にDocker内（http://127.0.0.1:6080/）で実行して Andoroid Studio を設定してください。/opt/android-studio/bin/studio.sh
3.Andoroid Studioの設定
起動後
ダイアログの右下のConfigure > Android SDK > タブのSDK Toolsを選択 > Android ADK Command-line Tools をチェック > OK
※初期起動のダイアログでやり忘れたら以下の手順で実行
Andoroid Studio 起動中
ツールバー Tools > SDK Toolsを選択 > Android ADK Command-line Tools をチェック > OK
3.SDKの設定
flutter config --android-sdk /root/Android/Sdk
/root/Andorid/Sdk を適宜変えてください。
4.Androidの設定
flutter doctor --android-licenses
全て y でOKです。
5.インストールの確認
flutter doctor
以下の画像のようになったら Andoroid の開発環境も整います。
※ただし、Andoroid Studio のエミュレータは現在Docker上では動かないようなのでご注意してください。（Andoroid エミュレータはVM上では動かない模様）
