Mac(AppleSilicon)のAndroidStudioでFlutter(×RiverPod)の開発環境を作る


私（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

1. Flutter SDKのダウンロード
    - 上記、Flutterの公式サイトからFlutter SDKをダウンロードします
2. ターミナルを起動する
3. （必要なら）Rosettaのインストール
    - Rosettaをインストールしてない場合は以下のコマンドでインストールします

        ```
        $ sudo softwareupdate --install-rosetta --agree-to-license
        ```

4. Flutter SDKの解凍とインストール
    - ※zipファイル名はダウンロードしたファイル名に変更して下さい
    
        ```
        $ mkdir ~/development
        $ cd ~/development
        $ unzip ~/Downloads/flutter_macos_arm64_3.7.11-stable.zip
        ```
    
5. 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
        ```
        
6. 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
```

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

https://qiita.com/YokohamaHori/items/eb2cc2cadc6cf68bc511

## 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から実行

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

参考サイト
- [Flutterの環境構築(Mac編)｜Flutter基礎入門 by Flutter大学](https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc)


## RiverPodの開発環境を構築

1. 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
        ```

2. パッケージのインストール
    
    - 以下のコマンドを実行して、インストールします
        
        ```
        flutter pub get
        ```
        
3. 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),
            ),
          ),
        );
      }
    }
    ```
    
4. アプリをビルドする
    - flutter run or AndroidStudio から実行して、Hello worldと表示されればOKです
5. 最後に、AndroidStudioのプラグインも追加しておく
    - Flutter Riverpod Snippets

参考サイト
- [はじめに | Riverpod](https://riverpod.dev/ja/docs/getting_started)
- [【2022年最新】Flutter × Riverpod の基本的な使い方解説！ - 週刊Flutter大学](https://blog.flutteruniv.com/flutter-riverpod/)


# おまけ. pod installが失敗した時

Flutterでビルド時にpod installが失敗した時は以下の記事をご参照願います。

https://qiita.com/YokohamaHori/items/341f0f3bd50e74f7b5e8