私（iOSエンジニア）がFlutter環境を作成したときの忘備録になります。

前提

XcodeとAndroidStudioはインストールしておいて下さい

開発環境

macOS Monterey 12.6
Xcode 14.2
Android Studio Chipmunk | 2021.2.1 Patch 1
Flutter 3.7.11
RiverPod 2.3.4

環境構築手順

Flutterの開発環境を構築

公式のインストールガイド

https://docs.flutter.dev/get-started/install/macos

Flutter SDKのダウンロード
- 上記、Flutterの公式サイトからFlutter SDKをダウンロードします
ターミナルを起動する
（必要なら）Rosettaのインストール
- Rosettaをインストールしてない場合は以下のコマンドでインストールします
```
$ sudo softwareupdate --install-rosetta --agree-to-license
```
Flutter SDKの解凍とインストール
- ※zipファイル名はダウンロードしたファイル名に変更して下さい
```
$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_arm64_3.7.11-stable.zip
```

PATHの設定

bashの場合、以下のコマンドを実行します

$ echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.bash_profile
$ source ~/.bash_profile

zshの場合

$ echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc
$ source ~/.zshrc

flutter doctor

必要な依存パッケージを確認するため、以下のコマンドを実行します
```
$ flutter doctor
```

以下のようになれば成功です

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.11, on macOS 12.6 21G115 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.77.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

flutter doctor で問題があった時

下記のワーニングが出たら、メッセージ通りにコマンドを実行して解消します

$ flutter doctor
Running "flutter pub get" in flutter_tools...
Resolving dependencies in flutter/packages/flutter_tools... (8.4s)
  _fe_analyzer_shared 50.0.0 (58.0.0 available)
...

Got dependencies in flutter/packages/flutter_tools!
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.11, on macOS 12.6 21G115 darwin-arm64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 33.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 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.77.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

それでもダメな時は以下の記事をご参照願います

Flutterのテストアプリを実行

公式ドキュメントに倣って、テストアプリをコマンドから実行します。

$ flutter create my_app
$ cd my_app
$ flutter run
Multiple devices found:
macOS (desktop) • macos  • darwin-arm64   • macOS 12.6 21G115 darwin-arm64
Chrome (web)    • chrome • web-javascript • Google Chrome 112.0.5615.49
[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (To quit, press "q/Q"): 1

1とキー入力してmacアプリが起動すれば成功
アプリを閉じれば、コンソール上での接続も解除されます

FlutterのテストアプリをAndroidStudioから実行

AndroidStudioにFlutterプラグインをインストールする
- Preferences/Plugins からFlutterを検索してInstall
- InstallしたらIDEを再起動する
AndroidStudioで先ほど作成したmy_appプロジェクトを開く
- File/New/New Flutter Project…
エミュレータを起動する
- （無ければ）エミュレータをダウンロードする
ビルドしてアプリが立ち上がればOK

参考サイト

Flutterの環境構築(Mac編)｜Flutter基礎入門 by Flutter大学

RiverPodの開発環境を構築

pubspec.yamlの設定

（新規プロジェクトの場合）pubspec.yamlにflutter_riverpodを追記します

environment:
sdk: '>=2.19.6 <3.0.0'
flutter: ">=2.0.0"

dependencies:
flutter:
    sdk: flutter
flutter_riverpod: ^2.1.1

パッケージのインストール
- 以下のコマンドを実行して、インストールします
```
flutter pub get
```

lib/main.dartを以下に書き換える（公式からコピペ）

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 値（ここでは "Hello world"）を格納する「プロバイダ」を作成します。
// プロバイダを使うことで値のモックやオーバーライドが可能になります。
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  runApp(
    // プロバイダをウィジェットで利用するには、アプリ全体を
    // `ProviderScope` ウィジェットで囲む必要があります。
    // ここに各プロバイダのステート（状態）・値が格納されていきます。
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// StatelessWidget の代わりに Riverpod の ConsumerWidget を継承します。
class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

アプリをビルドする
- flutter run or AndroidStudio から実行して、Hello worldと表示されればOKです
最後に、AndroidStudioのプラグインも追加しておく
- Flutter Riverpod Snippets