Dockerのコンテナで起動したFlutter( Web)をDevtoolsで表示

あまプロではFlutterで開発する事があります。
Flutterのデバッグではまったのであメログ。

Flutterは"Everything is a widgets" の思想の通り、全てがウィジェットで構成されています。
何か画面を作る際はそのウィジェットを組み合わせて作るのですが、画面を作り込んで行くとどうしてもウィジェットの中にウィジェットの中にウィジェット…の様に階層が深くなってしまいます。
ブラウザのデベロッパーツールで階層を確認しようとしても、Flutterの出力するHTMLはcanvas要素なので階層が解りません。
そうすると、AIには簡単に理解できても人間にはなかなか理解把握ができません。
常にAIを当てにして教えてもらっても良いのですが、Flutterには階層を表示する用のツールDevtoolsが予め備わってますので、それを利用して把握します。

開発機（ホスト）直下に開発環境を構築する場合は良いのですが、一般的にはDockerやLXDなどのコンテナを使ってコンテナ内に開発環境を構築します。
こうすると、コンテナを切り替えるだけで開発環境を切り替える事ができるので便利です。
しかし、コンテナを経由するとホスト直下でできてた事ができなかったり、設定を工夫する必要が有ります。
今回は下記の様に、ホストのブラウザからコンテナ上のFlutter（のウェブページ）へ接続して、更にDevtoolsで階層を確認してみます。

ざっくり概念図

先ずコンテナの作成ですが今回はDockerを使ってUbuntuのコンテナを作ってみます。
Dockerのインストールや基本操作は各種サイトやAIなどをご確認下さい。
既にFlutterを構築しているコンテナをお持ちの場合は そちらを使っても問題ありません。

docker run -p 35059:35059 -p 80:80 -d --name con-name ubuntu:latest

 こちらはcon-nameという名前のコンテナを作成するコマンドです。
イメージはUbuntuの最新版を使って、コンテナの35059ポートをホストの35059ポートへ割り当て、コンテナの80ポートをホストの80ポートへ割り当てています。
35059ポートはDevtools用になります。80ポートはウェブページ用のポートです。
ポートは変更しても構いません。

次にコンテナ内に入って、Flutterをインスールして、Flutterプロジェクトを作成します。
インストール方法は公式サイトのドキュメントをご覧下さい。

次にsocatパッケージをインストールします。

apt install socat

socatはポートフォワード（データ転送）ツールです。 

socatをインストールしたら、 バックグラウンドで実行しておきます。

socat TCP-LISTEN:35059,fork,reuseaddr TCP:127.0.0.1:36000 &

こちらは35059ポートへのアクセスを36000ポートへ転送しています。
何故転送が要るのかは後程。
バックグラウンドでなくても、別のターミナルからコンテナに入って
socat TCP-LISTEN:35059,fork,reuseaddr TCP:127.0.0.1:36000
しても良いです。お好みで。

では次にFlutterをWeb実行します。

flutter run -d web-server --web-hostname=0.0.0.0 --web-port=80 --dds-port=36000

こちらはFlutterをウェブサーバで実行して、0.0.0.0で総てのIPからアクセス可能にして、80ポートでアクセス可能にして、DertDevelopmentServiceを36000ポートに指定しています。
このdds-portを指定しないと、毎回ランダムなポートが割り当てられますので必ず指定します。
ここがややこしい所で、web-serverはweb-hostname=0.0.0.0を指定すると総てのIPからアクセス可能つまりコンテナ外のホストからアクセス可能になるのですが、ddsにはdds-hostname=0.0.0.0に相当するオプションがなく、ホストからアクセスできません。
ddsにアクセスできるのはコンテナ内の127.0.0.1のみになります。
そこで先程のsocatでホストからのアクセスを35059ポートで受けて、ddsの36000ポートへ転送するという手間が要ります。これでコンテナ内の127.0.0.1からddsへアクセスした事になります…面倒臭い。

以上で準備ができました。ホストのブラウザでhttp://127.0.0.1/へアクセスします。 

flutter createしただけのウェブページ

作成したプロジェクトのウェブページが表示されます。
ウェブページにアクセスがあると、コンテナのターミナルにDevtools用のURLが表示されます。

文字化けしてるのは御愛嬌

そのURLへホストのブラウザでアクセスするんですが、ポートを36000から35059へ置換してからアクセスします。
http://127.0.0.1:36000/Yk9MV84zNz0=/devtools/inspector?uri=ws://127.0.0.1:36000/Yk9MV84zNz0=/ws
なら
http://127.0.0.1:35059/Yk9MV84zNz0=/devtools/inspector?uri=ws://127.0.0.1:35059/Yk9MV84zNz0=/ws
にします。

Failed to connect the Dart tooling Deamonのエラーが出てますけど、表示されます

するとDevtoolsが表示されます。
Flutter Inspectorで階層構造が表示されます。

並べてみました

めちゃ解り易い。

今回の環境は 

Windows11 25H2
firefox --version
Mozilla Firefox 148.0
docker --version
Docker version 29.2., build a5c7197
lsb_release -a
No LSB modules are available.
Distributor ID:    Ubuntu
Description:    Ubuntu 24.04.4 LTS
Release:    24.04
Codename:    noble
flutter --version
Flutter 3.41.5・channel stable・https://github.com/flutter/flutter.git
Framework・revision 2c9eb20739 (31 bours ago)・2026-03-17 6:14:01 -0700
Engine・hash c1db59d880ca73dd86cec08a6663f287522d9f39 (revision 052f31d115) (2 days ago)・2026-03-17 20:29:11
Tools・Dart 3.11.3・Devtools 2.54.2
dart --version
Dart SDK version: 3.11.3 (stable) (Tue Mar 17 01:06:16 2026 -0700 on "linux_x64"

でした。