flutter導入雑メモ

環境

macOSで Xcode・Android Studio・Visual Studio Code などはインストール済みの前提で進めます。

環境は以下の通り。

Key	Value
OS	Mac OS X 10.15.6 (19G2021)
Ruby	2.7.1
Xcode Path	/Applications/Xcode.app/Contents/Developer/
Xcode Version	11.7
Android Studio Version	4.0.1
Visual Studio Code	1.49.1
Flutter	1.23.0-4.0.pre.21
Dart	2.10.0

Flutterのclone

基本はここの手順通り。
https://flutter.dev/docs/get-started/install/macos

安定版以外も頻繁に切り替えたいのでzipダウンロードではなく git clone する。

git clone https://github.com/flutter/flutter.git

Pathを通す

pathを通す。自分は .zprofileに設定した

export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

pathが通っているか確認

which flutter

バージョンもみとく

flutter --version
Flutter 1.23.0-4.0.pre.21 • channel master • https://github.com/flutter/flutter.git
Framework • revision 51fa704642 (2 weeks ago) • 2020-09-19 11:27:04 -0700
Engine • revision 4b8477d115
Tools • Dart 2.10.0 (build 2.10.0-142.0.dev)

Flutter と Dart が同じbinのpathを参照しているかチェック

which flutter dart

hermetic build ？

ドキュメントに書いてある hermetic build って？と思い少し脱線して調べる。

Optionally, pre-download development binaries:
The flutter tool downloads platform-specific development binaries as needed. For scenarios where pre-downloading these artifacts is preferable (for example, in hermetic build environments, or with intermittent network availability), iOS and Android binaries can be downloaded ahead of time by running:

GoolgeのSREブックの説明をみると、個人のマシン環境などビルドシステムの外部に依存して壊れるようなものでなく、再現性と一貫性があるビルドのことを指すらしい。
https://landing.google.com/sre/sre-book/chapters/release-engineering/

Build tools must allow us to ensure consistency and repeatability. If two people attempt to build the same product at the same revision number in the source code repository on different machines, we expect identical results.36 Our builds are hermetic, meaning that they are insensitive to the libraries and other software installed on the build machine. Instead, builds depend on known versions of build tools, such as compilers, and dependencies, such as libraries. The build process is self-contained and must not rely on services that are external to the build environment.
Rebuilding older releases when we need to fix a bug in software that’s running in production can be a challenge. We accomplish this task by rebuilding at the same revision as the original build and including specific changes that were submitted after that point in time. We call this tactic cherry picking. Our build tools are themselves versioned based on the revision in the source code repository for the project being built. Therefore, a project built last month won’t use this month’s version of the compiler if a cherry pick is required, because that version may contain incompatible or undesired features.

flutter doctor

引き続き flutter doctor を実行して警告を一つずつ潰していく。

関係ないけど flutter は利用情報を匿名化してGAで送信してるのね。

The Flutter tool uses Google Analytics to anonymously report feature usage
statistics and basic crash reports. This data is used to help improve

Flutter tools over time.

CocoaPodsが動作しないよという警告。

[!] Xcode - develop for iOS and macOS (Xcode 11.7)
✗ CocoaPods installed but not working.
You appear to have CocoaPods installed but it is not working.
This can happen if the version of Ruby that CocoaPods was installed with is different from the one being used to invoke it.
This can usually be fixed by re-installing CocoaPods. For more info, see https://github.com/flutter/flutter/issues/14293.
To re-install CocoaPods, run:
sudo gem install cocoapods

ローカルマシンでは rbenv で複数バージョンの ruby を管理しているが、使っている rubyバージョンに cocoapods がないので起きていた。単純に gem install cocoapods で解決。

次は Android Studio に Flutter と Dart のプラグインが入っていないという警告。

[!] Android Studio (version 4.0)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.

Android Studio を起動して Search everywhere で plugin を探して開く、Marketplace から Flutter を install 。依存する Dart プラグインもこのタイミングで一緒に install して終わったら Android Studio を再起動する。

最後は VS Code に Extension を install 、再起動して完了。

[!] VS Code (version 1.49.0)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

flutter docker を再実行して確認。問題無さそう。

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.22.0-10.0.pre.269, on Mac OS X 10.15.6 19G2021 x86_64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)

[✓] Xcode - develop for iOS and macOS (Xcode 11.7)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.49.1)
[✓] Connected device (1 available)

• No issues found!

サンプルアプリを実行

iOSシミュレーターで実行

次のコマンドでサンプルアプリ作成・シミュレータ上で実行まで行われます
- 任意のディレクトリで flutter create my_app
- cd my_app
- flutter run

iPhone実機で実行

• open ios/Runner.xcworkspace で workspace を開いて実機を選択して実行するだけ。（証明書などは別途設定が必要。）

Android実機で実行

• flutter devices で実機を認識してるかチェック
• studio ./android などで android プロジェクトを開く
• gradle sync に時間が1分位かかるのでしばし待つ
• ただ実機で実行するだけ（エミュレータも単純に実行できたので省略）

Webアプリの実行は beta チャネルの flutter が必要なため省略

Visual Studio Codeでサンプルアプリを実行 + Hot Reload 確認

ここの通り Hot Reload を試します。
https://flutter.dev/docs/get-started/test-drive?tab=vscode

• cd my_app の後 code . などで Visual Studio Code を起動
• cmd + shift + p で Flutter: Select Device を選択して任意のシミュレーターを起動（ステータスバーの右側からも選択可能）
• F5でデバッグ実行
• main.dartの文言を変更して保存すると Hot Reload される。

感想

全然ハマらなくて flutter もコマンドラインツールも良く出来てるなと感心しました。

余談、この方のアドベントカレンダーとても参考になりました。
https://adventar.org/calendars/4140