Flutter開発環境構築をいそいでやる(Mac × Android)

# はじめに
ハッカソンや1dayスプリント開発に参加した際など、必要に迫られて短時間でFlutter開発環境を構築しなければならない人(＆すっかり構築方法を忘れた未来の自分)に役立つように忘備録として残しておきます。
Macを使ってAndroidアプリを開発することを前提に、テスト用のFlutterプロジェクトを作成して仮想デバイス上で実行できるようになるまでをターゲットにします。

Flutterの[公式ドキュメント](https://flutter.dev/docs/get-started/install/macos)には開発環境構築についてしっかり書かれているので、時間と心に余裕がある人はじっくり読んで、焦らず実施すれば問題なく環境構築出来ると思います。

## Flutterについて
Flutterとは、単一のコードからモバイル、ウェブ、デスクトップ向けのネイティブアプリをコンパイルできるクロスプラットフォームのUIツールです。
Googleによって作られています。
![スクリーンショット 2020-12-24 4.36.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/76714cd0-2c3c-90aa-2b60-07d9d91af256.png)

### Flutterのざっくり特徴
- 単一のコードでAndroid/iOS/デスクトップネイティブアプリ、Webアプリを開発可能
    - Googleにより作られたDart言語を使用します。JavaやC#に雰囲気が似ています。
- ネイティブアプリのパフォーマンス
    - FlutterのコードはDart言語のネイティブコンパイラを使用し、ネイティブARMマシンコードにコンパイルされるため、高いパフォーマンスを実現できます。
- 即座にデバッグすることで高速に開発ができる
    - Stateful Hot Reloadにより変更したコードを即座に動作確認することが可能です。
- 表現力豊かで柔軟なUI
    - ネイティブアプリのUIを簡単に作成でき、カスタマイズも可能です。

# 環境
- Mac book Pro 13(Catalina 10.15.7)
- Flutter(1.22.5)
- Android Studio(4.1.1)
- git(2.24.0)

# おおまかな流れ
- Flutter SDKのダウンロード
- FlutterのPATHを設定
- Flutterの依存性の解決および確認
- Android StudioでDartの設定
- Androidの仮想デバイス作成
- テストAppの実行
- テストAppを修正してホットリロードの確認

# 詳細な手順
## Mac版Fultterのインストール
https://flutter.dev/docs/get-started/install からmacOSを選択する。
![スクリーンショット 2020-12-24 午前3.45.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/d368e360-7538-2a1d-271b-453c12dab4c1.png)

zipをクリックしてFlutter SDKをダウンロードする。
![スクリーンショット 2020-12-24 午前4.00.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/3fd6e81e-395e-1f15-4072-ecf068b5a00f.png)

## Flutter SDKの解凍
まずホームディレクトリ配下にdevelopmentディレクトリを作成し、そこでSDKのzipを解凍します。

```
mkdir ~/development
cd ~/development
unzip ~/Downloads/flutter_macos_1.22.5-stable.zip
```

## FlutterのPATHを通す
bash_profileを開いてFlutterのPATHを追加します。

```
vi ~/.bash_profile
# bash_profileに以下を追加
export PATH="$PATH:$HOME/development/flutter/bin"
```

bash_profileの設定追加を反映します。

```
source ~/.bash_profile
```

FlutterのPATHが通ったことを確認します。

```
which flutter
# コマンド実行結果が下記内容ならOK
/Users/[USER_HOME_DIRECTORY]/development/flutter/bin/flutter
```

## Flutterのセットアップに必要なインストールが完了したか依存性を確認
Flutterの開発に必要なツールなどが設定されているを下記コマンドで確認します。
このときDartSDKはFlutterに含まれているためDartを個別にインストールする必要はありません。 
Android Studioやxcodeなどがないとここでおこられます。
まずは一番上のFlutterにチェックマークがつけばOK。

```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.7 19H15 darwin-x64, locale ja-JP)

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      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:
        sudo gem install cocoapods
[!] Android Studio (version 3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.50.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

```

## Android Studioの設定
### Android Studioのインストール
Android Studioを[こちら](https://developer.android.com/studio)からダウンロードしてきて、インストールします。
![スクリーンショット 2020-12-24 5.49.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/5ee11708-edf4-d753-9e00-b1967b436e06.png)

### FlutterおよびDartのプラグインのインストール
Android Studioを起動してAndroid Studio->Preferences...を選択
![スクリーンショット 2020-12-24 5.54.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/da2d98df-776d-ff89-dd72-900b1a0f2953.png)

左のリストからPluginsを選択->検索フォームにflutterと入力してプラグインを検索する。
検索結果の最上位のflutter.devによって作られたFlutterを選択してInstallをクリック。
![スクリーンショット 2020-12-24 5.56.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/96e93fae-2e46-aa8a-5b9c-ed0d24775199.png)

サードパーティのプラグインを使用することの許諾を聞かれるのでAcceptをクリック。
![スクリーンショット 2020-12-24 6.00.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/c8f72d4b-75d5-3aa2-0c02-fddb2f7dee91.png)

Dartプラグインが必要なため、インストールするか聞かれるのでInstallをクリック。
![スクリーンショット 2020-12-24 6.02.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/3edb3f22-8f53-5ded-4251-51fe59c8bb34.png)

Restart IDEをクリック->RestartをクリックしてAndroid Studioを再起動する。
Create New Flutter Projectをクリック。
![スクリーンショット 2020-12-24 6.03.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/5c5f78a2-cab6-681d-d0d5-11301136ff92.png)




## Flutterテンプレートからテストアプリの作成
テンプレートから新しいFlutterアプリを作成して実行してみます。
まずはAndroid Studioの
![スクリーンショット 2020-12-24 6.32.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/6fb9cf51-8557-7233-ede1-60af4b140ff3.png)

Flutter Applicationを選択->Nextをクリック
![スクリーンショット 2020-12-24 6.33.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/0570c156-689f-176e-b009-3cc41f1e35da.png)

FlutterSDKパスが自分でインストールしたSDKの場所を指定していることを確認して、Nextをクリック
![スクリーンショット 2020-12-24 6.44.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/6af3858b-b3cd-bf2d-9c4f-95ececceb3d6.png)

Package nameの設定画面になりますが、今回は環境構築ができたことを確認するのみのテスト用アプリのため、そのままFinishをクリック
![スクリーンショット 2020-12-24 6.46.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/1bfea7c2-8b67-48f3-8887-f4c8cb31f75a.png)

自動でFlutterプロジェクトのテンプレートが作成されmain.dartの内容が表示されます。
![スクリーンショット 2020-12-24 6.48.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/b7318d43-29ee-0e0a-9d9b-fb4926345457.png)


### 仮想デバイスの作成
ADV Managerから仮想デバイスを作成します。
Android Studioの上部メニュー右側のADV Managerをクリックして起動します。
![スクリーンショット 2020-12-24 6.50.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/3c4f97a6-9cdd-8f18-3ca8-0ce5e0a0c0d6.png)

Create Virtual Deviceをクリック
![スクリーンショット 2020-12-24 6.52.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/646cb33d-d2b5-d7af-15de-d7a698368496.png)

CategoryのPhoneを選択して、検索フォームにPixel 3 XLを入力して検索
検索結果のPixel 3 XLを選択してNextをクリック
![スクリーンショット 2020-12-24 6.54.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/d1e68d35-8f55-f3c7-45be-cfec8c42ed68.png)

Q(Android 10.0)を選択してDownloadをクリック
![スクリーンショット 2020-12-24 6.56.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/014c55b4-a854-714f-2bc1-37c21f17d9c5.png)

Downloadが完了したらFinishをクリック
![スクリーンショット 2020-12-24 6.58.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/1cd3510c-fc18-816b-0731-7260c31c2fcf.png)

再度Qを選択してNextをクリック
![スクリーンショット 2020-12-24 6.59.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/995300c3-23af-de3b-16f6-b18d7ced19f6.png)

仮想デバイスの設定が表示されたらFinishをクリック
![スクリーンショット 2020-12-24 7.00.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/20b0d214-a69e-c88f-31ee-94cd2a3ed074.png)

仮想デバイスリストにPixel 3 XLが表示されたらActionsの▶︎ボタン(Launch this ADV in the emulator)をクリック
![スクリーンショット 2020-12-24 7.01.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/f2cbfc28-7ff8-8046-c443-6e83e39c92fa.png)
 ![スクリーンショット 2020-12-24 7.02.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/e4cc7131-a391-7da4-ce9a-9e3620540108.png)


emulatorが起動して仮想デバイスのPixel 3 XLが起動すればOK
![スクリーンショット 2020-12-24 7.08.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/e7c5549e-b78f-2a87-7fd5-18360ccd0cf1.png)


## テストアプリの実行
Android Studioの上部ツールバーの左側のTarget selectorにAndroid SDK build for x86(mobile)、真ん中のconfigurationにmain.dart、右側に先ほど作成した仮想デバイスのPixel 3 XLが表示されていることを確認して、▶︎(Runボタン)をクリック
![スクリーンショット 2020-12-24 7.10.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/ea59965b-cedd-dcfc-1287-30325e1c76f5.png)

テストアプリが起動すればOK
画面左したの＋ボタンをクリックすると画面上の数字がカウントアップされる。
![スクリーンショット 2020-12-24 7.12.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/817fbfe1-6735-950b-e977-67292efe25ce.png)


## テストアプリコードを変更してホットリロードを試す
Android Studioで/lib/main.dartを開き、MyAppクラスのページタイトル(main.dart29行目)の`Flutter Demo Home Page`を`Flutterテストアプリ`に変更する。

```dart
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutterテストアプリ'),
    );
  }
}
```

command + sを押して変更を保存し、emulatorの画面が変更した内容で更新されたことを確認する。
![スクリーンショット 2020-12-24 7.21.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/e6dece82-cdec-4fb5-a67d-1c55aca72927.png)



# まとめ
FlutterとAndroid Studioのインストール、各種設定を行い、仮想デバイス上でテストアプリが動作することを確認しました。

いかに早く価値検証をできるものを作るかという点でFlutterに非常に大きな可能性を感じたため、これから自分の欲しいものを作りながらFlutterを学んでいこうと思います！

# 参考
https://flutter.dev/docs/get-started/install/macos
https://flutter.dev/docs/get-started/editor
https://flutter.dev/docs/get-started/test-drive