Dev ContainerでFlutter on the Web開発をしたいと思ったけど、asdfで管理することにした

そもそもFlutterが初めてなので良く分かっていない。色々記事を読んでどうやっているのかをまとめてみる

Ubuntuイメージをベースに、aptでパッケージを追加していくタイプ

基本的なFlutterはAndroidやiOS向けにビルドするので、そのための環境やエミュレータ、エミュレータのウィンドウをDocker内から外向きに飛ばす必要があって面倒くさい。
ちなみに、今回はFlutter on the Web開発がしたいので、別にAndroidとかデバイス用のSDKはいらないのでは？と思っている

Flutter SDKというのが必要そうで、なんかgit cloneで取得できるようなものっぽい。公式のInstall手順

はtar.gzを落としてきているけど、その中身はおそらくGitのものと同じってことなんだろう。

Dartイメージをベースにインストールする方法
https://zenn.dev/nagakuta/scraps/39449e6c92b8f3

そういえば、FlutterはDartで書くんだった。Dartが必要になるので、ベースはDartイメージから始めるという手はありかもしれない。

DevContainer向けイメージで公式が配布しているDartのイメージはあるかな？

Hiroya-W

あった（過去型）。今は？

featuersを使う方法がある？みたいだが、今はもうサジェストに出てこないし、書いてみてもコンテナは起動しなかった。

一覧に書かれていないので、また別のリポジトリに移管されたっぽいか？

これか。動かないけど。開発が難しいんやろうなぁ...。

Hiroya-W

とりあえず、開発が難しそうな感じということが分かったので、DevContainerの機能に頼らず自分でセットアップしていこうと思う。

Hiroya-W

方針としては、この人のようにfvmを使ってFlutterを管理するのが良さそう。Dartがあるイメージをベースにやってみる。

Hiroya-W

fvmってなーんだ？
FVM（Flutter Version Management）で、Flutter SDKのバージョン管理をするためのツール。バージョン切り替えをプロジェクトごとにできるようにするので、基本的にはFVMに載せるのが良さそうだね。

Hiroya-W

とりあえず、Dartの公式イメージをベースに、DevContainerのテンプレートを作ってみる。

.devcontainer/Dockerfile

FROM dart:3.3

devcontainer/devcontainer.json

{
    "name": "Flutter DevContainer",
    "build": {
        "dockerfile": "Dockerfile"
    },
    "workspaceFolder": "/workspaces",
    "customizations": {
        "vscode": {
            "extensions": [
                "dart-code.flutter"
            ]
        }
    },
    "features": {
        "ghcr.io/devcontainers/features/common-utils:2": {}
    },
    "workspaceMount": "source=${localWorkspaceFolder},target=/workspaces,type=bind,consistency=cached",
    "remoteUser": "vscode"
}

Hiroya-W

Dockerfileの実行時はrootユーザなので、

dart pub global activate fvm

でインストールされるfvmへのパスは /root/.pub-cache/bin になる。しかし、/rootへの権限がvscodeユーザにはないのでバイナリを実行できない。

仕方がないので、Releaseからtar.gzを取得してバイナリだけ配置するようにする。

Hiroya-W

.devcontainer/Dockerfile

FROM dart:3.3

ENV PATH="/opt/fvm:${PATH}"

RUN apt-get update \
    && apt-get install -y --no-install-recommends \
    curl \
    git \
    wget \
    unzip \
    xz-utils \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

ARG FVM_VERSION=3.0.6
ARG ARCH=arm64
RUN wget https://github.com/leoafarias/fvm/releases/download/${FVM_VERSION}/fvm-${FVM_VERSION}-linux-${ARCH}.tar.gz \
    && tar xvf fvm-${FVM_VERSION}-linux-${ARCH}.tar.gz \
    && mv fvm /opt/ \
    && chmod +x /opt/fvm/fvm \
    && rm fvm-${FVM_VERSION}-linux-${ARCH}.tar.gz

ARG FLUTTER_VERSION=3.19.0
RUN fvm install ${FLUTTER_VERSION} \
    && fvm use ${FLUTTER_VERSION} --force --skip-setup \
    && fvm global ${FLUTTER_VERSION}

とすれば出来た。しかし、結局fvm installした際に配置される場所は/root/.fvm下になるらしい。これではvscodeユーザから fvm listとしても既にインストールしたFlutter SDKを見つける事ができない。

Hiroya-W

そもそも、Flutter SDKはDockerイメージ内では固定される予定（このプロジェクトで使うFlutter SDKを入れるところまでやってしまう）なので、別にFVMを使わなくてもGitで落としてくる方法でもありなのでは、という気もしてきた。

Gitで落としてくる方法でも良いが、コミット数が多いリポジトリなので、タグごとに生成されたtar.gzを落としてくる方法の方が軽そうに思える。
しかし、Flutter SDKとしてはGitリポジトリである必要があるようなので、GitでCloneしていく。

Error: The Flutter directory is not a clone of the GitHub project.
       The flutter tool requires Git in order to operate properly;
       to install Flutter, see the instructions at:
       https://flutter.dev/get-started

.devcontainer/Dockerfile

FROM dart:3.3

ARG FLUTTER_VERSION=3.19.0
ARG FLUTTER_SDK_PATH=/opt/flutter

ENV PATH="${PATH}:/opt/flutter/bin"

RUN apt-get update \
    && apt-get install -y --no-install-recommends \
    curl \
    git \
    wget \
    unzip \
    xz-utils \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

RUN git clone https://github.com/flutter/flutter.git ${FLUTTER_SDK_PATH} -b ${FLUTTER_VERSION} \
    && chmod -R 777 ${FLUTTER_SDK_PATH}

とすると出来た。これだけでいいのか。もしかして、asdfでDartとFlutterを管理すればいいだけなのでは？

Hiroya-W

asdfとFVMは共存出来ないという記事を多く見かける。Flutter SDKへのパスも異なるので、VSCodeでの設定も変わってくるのだろう。
asdfでFlutterを入れるのではなく、asdfでDartを入れ、そのDartでFVMをインストールし、Flutterを管理する。これで対応した。

Hiroya-W

Initial Setup

Dart

asdf add plugin dart
asdf install dart 3.3.0
asdf local dart 3.3.0

Flutter

Flutter SDK

dart pub global activate fvm
fvm install 3.19.0
fvm use 3.19.0

Create Flutter App

fvm flutter create .

Setup(after Inital Setup)

fvm install

Run Flutter App

fvm flutter run -d chrome