Flutter 使ってモバイルの世界さ行くべ 🐦

Flutter を覚えることに相成った。過去にネイティブアプリ（Objective-C/Swift）を作っていた頃からかなりブランクがあるので、Flutter を使っていて気付いたことや躓いたことをメモしていく。

Flutter SDK, Xcode, Android Studio を入れた後の大事な環境構築

一通りの開発ツールを入れた後の各 IDE での必要な設定は flutter doctor で確認できる。このコマンドがやるべきことをリストアップしてくれる。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.3, on macOS 14.4 23E214 darwin-arm64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.
      Download at: https://developer.apple.com/xcode/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] VS Code (version 1.87.1)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.
The Flutter CLI developer tool uses Google Analytics to report usage and diagnostic
data along with package dependencies, and crash reporting to send basic crash
reports. This data is used to help improve the Dart platform, Flutter framework,
and related tools.

Telemetry is not sent on the very first run. To disable reporting of telemetry,
run this terminal command:

    flutter --disable-analytics

If you opt out of telemetry, an opt-out event will be sent, and then no further
information will be sent. This data is collected in accordance with the Google
Privacy Policy (https://policies.google.com/privacy)

いくつかエラーが出ているので対応していく。

cmdline-tools component is missing.

コマンドラインツールが無いのでインストールする。

Android Studio

Android license status unknown.

ライセンスが不足しているので以下のコマンドでライセンスの承認をおこなう。ライセンスについての巻物みたいに長い文章がいくつか表示されるので y 連打。

$ flutter doctor --android-licenses
[=======================================] 100% Computing updates...
4 of 6 SDK package licenses not accepted.
Review licenses that have not been accepted (y/N)? y

Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.

Xcode の準備が足りてない。以下のコマンドを実行。

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

CocoaPods not installed.

CocoaPods が必要なのでインストールする。

$ brew update && brew upgrade
$ sudo gem install cocoapods
$ pod --version
1.15.2

Cocoapods のインストール中にエラー

Cocoapods のインストール中に「うわ、私の Ruby のバージョン、低すぎ・・・」という状況になりました。

ERROR:  Error installing cocoapods:
The last version of drb (>= 0) to support your Ruby & RubyGems was 2.0.6. Try installing it with `gem install drb -v 2.0.6` and then running the current command again
drb requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

私の環境では Ruby は rbenv で管理しているので、それを通して環境を整備しました。

// 安定版を表示
$ rbenv install -l
3.0.7
3.1.5
3.2.4
3.3.1
jruby-9.4.6.0
mruby-3.3.0
picoruby-3.0.0
truffleruby-24.0.1
truffleruby+graalvm-24.0.1

// 適当な Ruby のインストールと適用
$ rbenv install 3.3.1
$ rbenv global 3.3.1
$ exec $SHELL -l

先生、再診お願いします。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.3, on macOS 14.4 23E214 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] VS Code (version 1.87.1)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

大事なことって面倒くさい。

maechan 2ヶ月前に更新

flutter doctor -v は細かい仕様を確認できる。

[✓] Flutter (Channel stable, 3.19.3, on macOS 14.4 23E214 darwin-arm64, locale ja-JP)
    • Flutter version 3.19.3 on channel stable at /Users/maechan/Dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ba39319843 (10 days ago), 2024-03-07 15:22:21 -0600
    • Engine revision 2e4ba9c6fb
    • Dart version 3.3.1
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/maechan/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.87.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.84.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 14.4 23E214 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 122.0.6261.129

[✓] Network resources
    • All expected network resources are available.

• No issues found!

maechan 2ヶ月前に更新

Dart 用の VScode おすすめの設定

settings.json の設定は優先度によっていくつか設定がある。
今回はユーザー設定側 ~/Library/Application Support/Code/User/settings.json に追加した。

maechan 2ヶ月前

VSCode でデバッグ実行。

To use 'SeiyaのiPad' for development, enable Developer Mode in Settings → Privacy & Security.

Exited (1).

iPad の設定から開発者モードを ON にする。

maechan 2ヶ月前に更新

VSCode のデバッグ実行したら警告っぽいものが2つほど。

Launching lib/main.dart on macOS in debug mode...
--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:macOS, arch:arm64, id:xxxxxxxxxx-xxxxxxxxxx, name:My Mac }
{ platform:macOS, arch:x86_64, id:xxxxxxxxxx-xxxxxxxxxx, name:My Mac }
warning: Run script build phase 'Run Script' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'Flutter Assemble' from project 'Runner')

WARNING: Using the first of multiple matching destinations は、Xcode が複数の実行可能なターゲット（異なるアーキテクチャを持つ macOS デバイス）を検出して、その中から最初のものを自動的に選択したお知らせっぽいもの。

Run script build phase 'Run Script' will be run during every build because it does not specify any outputs. は、Xcode の「Run Script」ビルドフェーズが出力の依存関係を指定していないから、毎回のビルドで実行されるという内容。

どっちも初期の段階では無視して大丈夫そう。2つ目は Xcode の「Run Script」の output の依存もしくは Based on dependency analysis の設定をする。

うおお、久しぶりの Xcode や・・・懐かしくて鼻血でそう

maechan 2ヶ月前に更新

なんか上手くいかないときのおまじない flutter clean

不要なデータやキャッシュなどの削除に。

$ flutter clean
Cleaning Xcode workspace...
Cleaning Xcode workspace...
Deleting build...
Deleting .dart_tool...
Deleting Generated.xcconfig...
Deleting flutter_export_environment.sh...
Deleting ephemeral...

maechan 2ヶ月前

必要最低限、まずは覚えておくべきディレクトリやファイル

普段実装で使うコードを管理 lib/
パッケージ管理は pubspec.yaml
- .lock ファイルもあるよ
プラットフォーム毎の設定を管理する ios/, android/, web/ etc...

Flutter SDK, Xcode, Android Studio を入れた後の大事な環境構築

cmdline-tools component is missing.

Android license status unknown.

Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.

CocoaPods not installed.

Cocoapods のインストール中にエラー

先生、再診お願いします。

Dart 用の VScode おすすめの設定

必要最低限、まずは覚えておくべきディレクトリやファイル

エミュレータでアプリを立ち上げる

基本的な画面構造

各ウィジェットの説明

コードサンプル

公式が公開している「Widget or the Week」が優秀

パッケージの検索は「pub.dev」

Flutter/Dart のモバイル開発の世界観

テスト

pod install が終わらない

自分の環境ではこの手順で解消された

レイアウトの制約

Flutter のマスコットは青い鳥「Dash」君

Enum の中で const が書ける

implements キーワード

抽象クラス (abstract class)

Dart のコンセプト

標準アノテーション

プロデューサーとコンシューマーのルール

Generators

クラス修飾子

final と const の違い

Dart の並行処理

Dart の null-safety

ハンズオン・サンプルアプリは公式が優秀

Dart

Flutter

バージョン管理

インストールと使い方

エイリアス効いている

fvm で管理しているバージョンをプロジェクトに適用させる（VSCode）

Dart のバージョンが違うぞ？

StatelessWidget, StatefulWidget

環境変数

iOS 向けのデザインに特化したアプリケーション開発に "CupertinoApp"

ディープリンクはネイティブ設定が必要

Service Locator パターン

Flutter を車に例えて

RenderObject

State と Element の関係

Element の再利用

InheritedWidget

公式の "パフォーマンスに関する考察"

Performance considerations

個人的メモ

お世話になった書籍

アーキテクチャ

不要なプラットフォームを削除

Firebase + Riverpod + freezed のライブラリ

freezed 関連で読んでよかった記事（公式以外）

Riverpod 公式のサンプルがよさそう

Riverpod 関連で読んでよかった記事（公式以外）

Riverpod: FutureProvider と StreamProvider の違い

`pod install` が終わらない

`final` と `const` の違い