More than 5 years have passed since last update.

Flutter Webを動かしたときにつまづいたこと

Last updated at 2019-05-08Posted at 2019-05-08

Flutter Webが来ました🎊

https://github.com/flutter/flutter_web

ひとまず手元で examples/hello_world が動くところまでできています。

Flutterに関してまったくセットアップしていない環境から始めたのですが、3点ほど引っかかるところがあったのでメモしておきます。

Flutter素人がやった手順なので、大間違いなところがありそうです。有識者の方、ツッコミお待ちしております。

全体の流れ

大まかなセットアップの流れとしては、次のような感じになります。

普通のFlutterのセットアップ手順でセットアップする
- ひとまず flutter doctor コマンドが通ればOKです
- Android StudioやVSCodeのセットアップはしなくても、たぶん flutter precache の手順まで実施できてればいけそうな気もします
Flutter WebのGetting Startedを実施します

このうち、手順2で引っかかるところがあったので、それぞれ解説します。

1. webdevのインストールはサンプルプロジェクトに入った後

git clone したらすぐに flutter packages... を実行していいような雰囲気で書いてあります。

ですが、実際にはpubコマンドは pubspec.yaml がある場所で叩かないといけないので、エラーになります。手順をなぞるなら、 cd examples/hello_world に入るのが先で、 flutter packages... を実行するのは後です。

2. dartコマンドにもパスを通す

webdev serve を実行すると、次のようなエラーが出ることがあります。

$ webdev serve
/your_flutter_path/flutter/.pub-cache/bin/webdev: line 7: dart: command not found

これは webdev コマンドのシェルスクリプト実装を見るとわかるのですが、内部で dart コマンドを実行しています。

webdev

#!/usr/bin/env sh
# This file was created by pub v2.3.0-dev.0.5.flutter-a1668566e5.
# Package: webdev
# Version: 2.0.4
# Executable: webdev
# Script: webdev
dart "/your_flutter_path/flutter/.pub-cache/global_packages/webdev/bin/webdev.dart.snapshot.dart2" "$@"

# The VM exits with code 253 if the snapshot version is out-of-date.
# If it is, we need to delete it and run "pub global" manually.
exit_code=$?
if [ $exit_code != 253 ]; then
  exit $exit_code
fi

pub global run webdev:webdev "$@"

もちろん皆さんのお手元には dart コマンドにパスが通っていますよね？　そんなわけないだろ・・・！

はい、というわけでググってみましたが、ドンピシャではないものの似たような悩みを見つけました。

/bin/sh: dart: command not found · Issue #27162 · flutter/flutter

If you want to use the dart corresponding to your flutter environment, add your-flutter-dir/flutter/bin/cache/dart-sdk/bin to your PATH.

よっしゃ。ということでパスに追加したところ、本件のエラーは出なくなりました。

3. `pub get` はflutter経由ではなく直接叩く

それでは今度こそ動くかなということで webdev serve を叩きます。

$ webdev serve
webdev could not run for this project.
The pubspec.yaml file has changed since the pubspec.lock file was generated, please run "pub get" again.

pubspec.yaml と pubspec.lock のズレとはどういうことだろう……と思いつつ、ひとまず pub get をやり直しなさいと言われているので、やってみましょう。さきほど webdev をactivateしたときのコマンドに倣って、 flutter packages pub get で行けるでしょうか。

$ flutter packages pub get
Resolving dependencies...
Warning: You are using these overridden dependencies:
! flutter_web 0.0.0 from path ../../packages/flutter_web
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui
Got dependencies!
Precompiling executables...
Precompiled build_runner:graph_inspector.
Precompiled build_runner:build_runner.
$ webdev serve
webdev could not run for this project.
The pubspec.yaml file has changed since the pubspec.lock file was generated, please run "pub get" again.

ダメっぽいです。

ここで再び webdev コマンドの実装をよく見てみましょう。

webdev

#!/usr/bin/env sh
# This file was created by pub v2.3.0-dev.0.5.flutter-a1668566e5.
# Package: webdev
# Version: 2.0.4
# Executable: webdev
# Script: webdev
dart "/your_flutter_path/flutter/.pub-cache/global_packages/webdev/bin/webdev.dart.snapshot.dart2" "$@"

# The VM exits with code 253 if the snapshot version is out-of-date.
# If it is, we need to delete it and run "pub global" manually.
exit_code=$?
if [ $exit_code != 253 ]; then
  exit $exit_code
fi

pub global run webdev:webdev "$@" # ←！！！？？？

パスが通っている場所から pub が実行されています。これはもしかして、 flutter packages pub が管理してる場所とは違うのでは……？

しかし pub コマンドなんて手元にはなかったはず。まあ一応確かめてみますか……

$ which pub
/your_flutter_path/flutter/bin/cache/dart-sdk/bin/pub

なんかありますね。dartにパスを通したときに一緒に通ってたみたいです。

そういうことならひとまず叩いてみましょう。

$ pub get
Resolving dependencies... (16.5s)
+ analyzer 0.36.3
+ archive 2.0.8
+ args 1.5.1
+ async 2.2.0
+ bazel_worker 0.1.20
+ build 1.1.4
+ build_config 0.4.0
+ build_daemon 0.6.0
...
Downloading quiver 2.0.3...
Downloading intl 0.15.8...
Changed 66 dependencies!
Precompiling executables... (36.9s)
Precompiled build_runner:graph_inspector.
Precompiled build_runner:build_runner.

おっ、通りました。では、改めて webdev serve を実行してみます。

$ webdev serve
[INFO] Serving `web` on http://localhost:8080
[INFO] Running build completed, took 39.1s
[INFO] Caching finalized dependency graph completed, took 285ms
[INFO] Succeeded after 39.4s with 548 outputs (3169 actions)

やったー！　通ったー！！