Tech Blog

Flutter 開発環境を Development Containers で構築してみる

Cover Image for Flutter 開発環境を Development Containers で構築してみる

最近 Flutter を触る機会が増えたので出来るだけ開発環境を Development Containers で構築してみる

今回の環境

TL;DR

  // .devcontainer/devcontainer.json
+ // For format details, see https://aka.ms/devcontainer.json. For config options, see the
+ // README at: https://github.com/devcontainers/templates/tree/main/src/debian
+ {
+ 	"name": "namer_app",
+ 	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+ 	// "image": "mcr.microsoft.com/devcontainers/base:bullseye",
+ 	"build": {
+ 		// Path is relative to the devcontainer.json file.
+ 		"dockerfile": "Dockerfile"
+ 	},
+ 	"runArgs": ["--platform=linux/amd64" ],
+
+ 	// Features to add to the dev container. More info: https://containers.dev/features.
+ 	"features": {
+ 		"ghcr.io/devcontainers/features/git:1": {}
+ 	},
+
+ 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+ 	// "forwardPorts": [],
+
+ 	// Configure tool-specific properties.
+ 	"customizations": {
+ 		"vscode": {
+ 			"extensions": [
+ 				"Dart-Code.flutter",
+ 				"fwcd.kotlin"
+ 			]
+ 		}
+ 	},
+
+ 	"onCreateCommand": ".devcontainer/oncreate.sh",
+ 	"postStartCommand": ".devcontainer/poststart.sh"
+
+ 	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+ 	// "remoteUser": "root"
+ }
+

  # .devcontainer/Dockerfile
+ ARG VARIANT="bookworm"
+ FROM --platform=linux/amd64 mcr.microsoft.com/devcontainers/base:${VARIANT}
+
+ # Install needed packages. Use a separate RUN statement to add your own dependencies.
+ RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+     && apt-get install -y curl git unzip xz-utils zip libglu1-mesa \
+     && apt-get autoremove -y && apt-get clean -y && rm -rf /var/lib/apt/lists/*
+
+ # [Optional] Uncomment this section to install additional OS packages.
+ RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+     && apt-get install -y --no-install-recommends \
+         clang cmake libgtk-3-dev ninja-build pkg-config \
+         libc6:amd64 libstdc++6:amd64 lib32z1 libbz2-1.0:amd64
+

  # .devcontainer/oncreate.sh
+ #!/bin/bash
+ # vim:sw=4:ts=4:et
+
+ set -e
+
+ # set git safe directory
+ git config --global --add safe.directory $(pwd)
+
+ export FLUTTER_ROOT="$HOME/development/flutter"
+ export PATH="$FLUTTER_ROOT/bin:$PATH"
+ mkdir -p ${FLUTTER_ROOT%/*}
+ git clone -b stable https://github.com/flutter/flutter.git ${FLUTTER_ROOT}
+
+ export COMMANDLINETOOLS_URL=$(curl -fsSL https://developer.android.com/studio | grep -o "https:\/\/dl.google.com\/android\/repository\/commandlinetools\-linux\-[0-9]*_latest\.zip")
+ curl -fsSLO --output-dir /tmp ${COMMANDLINETOOLS_URL}
+ unzip -q -d /tmp /tmp/commandlinetools-linux-*.zip
+ rm -f /tmp/commandlinetools-linux-*.zip
+ export ANDROID_HOME="$HOME/Android/sdk"
+ export PATH="${ANDROID_HOME}/cmdline-tools/latest/bin:$PATH"
+ mkdir -p ${ANDROID_HOME}/cmdline-tools
+ mv -f /tmp/cmdline-tools ${ANDROID_HOME}/cmdline-tools/latest
+ export ADB_SERVER_SOCKET="tcp:host.docker.internal:5037"
+
+ export SDKMAN_DIR="${HOME}/.sdkman"
+ curl -s "https://get.sdkman.io" | bash
+ source "/home/vscode/.sdkman/bin/sdkman-init.sh"
+
+ sdk install java
+ sdk install kotlin
+
+ yes | sdkmanager --licenses
+ sdkmanager "platform-tools" "build-tools;35.0.0" "platforms;android-35"
+
+ flutter doctor
+

devcontainer open .

yes | sdkmanager "platform-tools" "emulator" "platforms;android-35" "system-images;android-35;google_apis;arm64-v8a"
[=======================================] 100% Computing updates... 
avdmanager create avd -n emulator-5554 -k "system-images;android-35;google_apis;arm64-v8a" -d pixel_7

[=======================================] 100% Fetch remote repository...
Auto-selecting single ABI arm64-v8a
adb start-server
* daemon not running; starting now at tcp:5037
* daemon started successfully
emulator -avd emulator-5554
INFO    | Android emulator version 35.2.10.0 (build_id 12414864) (CL:N/A)
INFO    | Graphics backend: gfxstream
INFO    | Found systemPath /opt/homebrew/share/android-commandlinetools/system-images/android-35/google_apis/arm64-v8a/
...

Android Emulator - emulator-5554:5554

Long version

１．依存関係のインストール

apt-get update && export DEBIAN_FRONTEND=noninteractive
apt-get install -y curl git unzip xz-utils zip libglu1-mesa
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
...
Updating certificates in /etc/ssl/certs...
0 added, 0 removed; done.
Running hooks in /etc/ca-certificates/update.d...
done.

for Android apps

apt-get install -y --no-install-recommends libc6:amd64 libstdc++6:amd64 lib32z1 libbz2-1.0:amd64
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
...
Setting up libc6-i386 (2.36-9+deb12u8) ...
Setting up lib32z1 (1:1.2.13.dfsg-1) ...
Processing triggers for libc-bin (2.36-9+deb12u8) ...

for Linux apps

apt-get install -y --no-install-recommends clang cmake libgtk-3-dev ninja-build pkg-config
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
...
Setting up libatspi2.0-dev:amd64 (2.46.0-5) ...
Setting up libatk-bridge2.0-dev:amd64 (2.46.0-5) ...
Setting up libgtk-3-dev:amd64 (3.24.38-2~deb12u2) ...

２．Java & Kotlin のインストール

curl -s "https://get.sdkman.io" | bash

...
Please open a new terminal, or run the following in the existing one:

source "/home/vscode/.sdkman/bin/sdkman-init.sh"

Then issue the following command:

sdk help

Enjoy!!!
sdk install java

Downloading: java 21.0.5-tem

...
Installing: java 21.0.5-tem
Done installing!


Setting java 21.0.5-tem as default.
sdk install kotlin

Downloading: kotlin 2.0.21

...
Installing: kotlin 2.0.21
Done installing!


Setting kotlin 2.0.21 as default.
code --install-extension fwcd.kotlin
Installing extensions on Dev Container: namer_app @ desktop-linux...
Installing extension 'fwcd.kotlin'...
Extension 'fwcd.kotlin' v0.2.35 was successfully installed.

３．Command-line tools のインストール

export COMMANDLINETOOLS_URL=$(curl -fsSL https://developer.android.com/studio | grep -o "https:\/\/dl.google.com\/android\/repository\/commandlinetools\-linux\-[0-9]*_latest\.zip")
curl -fsSLO --output-dir /tmp ${COMMANDLINETOOLS_URL}
unzip -q -d /tmp /tmp/commandlinetools-linux-*.zip
rm -f /tmp/commandlinetools-linux-*.zip
export ANDROID_HOME="$HOME/Android/sdk"
export PATH="${ANDROID_HOME}/cmdline-tools/latest/bin:$PATH"
mkdir -p ${ANDROID_HOME}/cmdline-tools
mv -f /tmp/cmdline-tools ${ANDROID_HOME}/cmdline-tools/latest
export ADB_SERVER_SOCKET="tcp:host.docker.internal:5037"

４．Flutter のインストール

git clone -b stable https://github.com/flutter/flutter.git ${FLUTTER_ROOT}
Cloning into '/root/development/flutter'...
remote: Enumerating objects: 544257, done.
remote: Counting objects: 100% (483/483), done.
remote: Compressing objects: 100% (312/312), done.
remote: Total 544257 (delta 279), reused 278 (delta 141), pack-reused 543774 (from 1)
Receiving objects: 100% (544257/544257), 165.81 MiB | 23.95 MiB/s, done.
Resolving deltas: 100% (421374/421374), done.
code --install-extension Dart-Code.flutter
Installing extensions on Dev Container: namer_app @ desktop-linux...
Installing extension 'dart-code.flutter'...
Extension 'dart-code.flutter' v3.98.0 was successfully installed.
Extension 'dart-code.dart-code' v3.98.1 was successfully installed.
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.4, on Debian GNU/Linux 12 (bookworm) 6.10.4-linuxkit, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Linux toolchain - develop for Linux desktop
[!] Android Studio (not installed)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

５．Android Emulator のインストール

yes | sdkmanager "platform-tools" "emulator" "platforms;android-35" "system-images;android-35;google_apis;arm64-v8a"
[=======================================] 100% Computing updates... 
avdmanager create avd -n emulator-5554 -k "system-images;android-35;google_apis;arm64-v8a" -d pixel_7

[=======================================] 100% Fetch remote repository...
Auto-selecting single ABI arm64-v8a

５．Run debug

devcontainer open .

adb start-server
* daemon not running; starting now at tcp:5037
* daemon started successfully
emulator -avd emulator-5554
INFO    | Android emulator version 35.2.10.0 (build_id 12414864) (CL:N/A)
INFO    | Graphics backend: gfxstream
INFO    | Found systemPath /opt/homebrew/share/android-commandlinetools/system-images/android-35/google_apis/arm64-v8a/
...

flutter devices
Found 2 connected devices:
  sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 15 (API 35) (emulator)
  Linux (desktop)             • linux         • linux-x64     • Debian GNU/Linux 12 (bookworm) 6.10.4-linuxkit

Run "flutter emulators" to list and start any available device emulators.

If you expected another device to be detected, please run "flutter doctor" to diagnose potential issues. You may also try increasing the time to wait for connected
devices with the "--device-timeout" flag. Visit https://flutter.dev/setup/ for troubleshooting tips.
flutter run -d emulator-5554
Launching lib/main.dart on sdk gphone64 arm64 in debug mode...
Running Gradle task 'assembleDebug'...                             37.4s
✓ Built build/app/outputs/flutter-apk/app-debug.apk
Installing build/app/outputs/flutter-apk/app-debug.apk...          623ms
...

参考にしたページ