【2021年版】絶対に失敗しないFlutter環境構築

Flutter の開発環境構築過程を示していきます。

※ 私は Mac でやったので、Windows とは手順等が異なる部分があると思います。

Flutter SDK のダウンロード

・以下のリンクから該当する OS のインストーラ（約 1 GB）をダウンロード

Install

・インストールページの通りにこなす
（この時点で、flutter doctor が実行できるようにしておく）
flutter doctor を実行すると以下のような出力が見られます。

users-MacBook-Pro:~ user$ flutter doctor
Building flutter tool...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.1, on Mac OS X 10.13.6 17G2208 darwin-x64,
   locale en-JP)
[✗] Android toolchain - develop for Android devices
   ✗ Unable to locate Android SDK.
     Install Android Studio from:
     https://developer.android.com/studio/index.html
     On first launch it will assist you in installing the Android SDK
     components.
     (or visit https://flutter.dev/docs/get-started/install/macos#android-setup
     for detailed instructions).
     If the Android SDK has been installed to a custom location, please use
     `flutter config --android-sdk` to update to that location.

[✗] 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 see
     https://guides.cocoapods.org/using/getting-started.html#installation for
     instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] Connected device (1 available)

Xcode や Android toolchain、Android Studio がまだ十分な状態ではないですが、今はこのままで大丈夫です。flutter doctor コマンドが使えるようにしてください。

エディタ関係の準備

・以下のリンクから Android Studio をダウンロード（約 1 GB）
（すでにインストールしている方はスキップして OK）

Android Studio とアプリツールをダウンロードする - Android デベロッパー  |  Android Developers

・Android エミュレータを作成する
Configure → AVD Manager → Create Virtual Device… → 好きなバージョンを選択して Next → Finish

・テンプレートアプリを作成して実行する
（<app_name> は各自の作成するアプリ名に置き換えて下さい）

その後、もう一度 flutter doctor を実行します。

$ flutter create <app_name>
Creating project <app_name>...
 <app_name>/ios/Runner.xcworkspace/contents.xcworkspacedata (created)
 <app_name>/ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
 (created)
 <app_name>/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings
 (created)
...

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.1, on Mac OS X 10.13.6 17G2208 darwin-x64,
   locale en-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
   ✗ 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
     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 see
     https://guides.cocoapods.org/using/getting-started.html#installation for
     instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

$ flutter doctor --android-licenses

↑Android Studio にチェックが入りました。

・Configure → Plugin → Flutter と Dart をインストール

・flutter doctor で Android License がパスできていない場合

$ flutter doctor --android-licenses
-> これでもう一度 flutter doctor で Xcode 以外がパスできていれば OK

-> 上のコマンドがコケる場合
・Android Studio の SDK Manager で Android SDK Command-line Tools をインストール

-> これでもう一度 flutter doctor --android-licenses を実行する
-> flutter doctor で Xcode 以外がパスできていれば OK

テストアプリの起動

・先ほど作ったテンプレートアプリプロジェクトを Android Studio で開く
・インポートしてあるエミュレータデバイスを接続させる
・プログラムを走らせる

↓↓↓↓↓↓↓↓↓↓↓↓

以下のようなアプリが起動し、右下の「＋」ボタンを押すと数字がインクリメントされれば OK