# 【Flutter】Flutter の開発環境を Docker で作ってみた
> Flutter を触ってみたくて Flutter の開発環境を Docker で作ってみました
- Canonical: https://c-a-p-engineer.github.io/flutter-docker/
- Published: 2021-06-13T18:00:00.000Z
- Modified: 2021-06-13T18:00:00.000Z
- Categories: Docker, Flutter
- Tags: Docker, Flutter
# 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に接続して作業します。（ターミナルを開いてください）
* http://127.0.0.1:6080/
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 の開発環境も整います。
※ただし、Andoroid Studio のエミュレータは現在Docker上では動かないようなのでご注意してください。（Andoroid エミュレータはVM上では動かない模様）