Copy & Paste Engineer

【Flutter】Flutter の開発環境を Docker で作ってみた

Flutter の開発環境を Docker で作ってみた

Flutter を触ってみたくて Flutter の開発環境を Docker で作ってみました。

Docker

作った Docker は以下のリポジトリに入れています。 c-a-p-engineer/docker-flutter

使用したDocker Image

使用方法

README.md に記載していますが、以下のコマンドだけで開発完了を作れます。

docker-compose up -d --build

サンプルまで作る

Docker 内に入る。

docker exec -it flutter bash

もしくは以下のURLに接続して作業します。（ターミナルを開いてください）

  1. 作業ディレクトリ
cd /src

2.サンプル作成 flutter サンプルを作成

flutter create .

3.サンプル起動 port:55555 でサーバー起動

flutter run -d web-server --web-port 55555 --web-hostname 0.0.0.0

http://localhost:5555 で確認

4.build

flutter build web

ビルドしたファイルはアップする事で実際にWebにアップすることで使用することが出来ます。 Flutter Demo

Andoroid用の設定

Androidの設定 以下の設定を有効にするとAndoroid Studioをインストールします。 .env.example → .env INSTALL_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 の開発環境も整います。 desktop.png

※ただし、Andoroid Studio のエミュレータは現在Docker上では動かないようなのでご注意してください。（Andoroid エミュレータはVM上では動かない模様）