【Flutter】環境構築（macOS）

Flutter SDK

以下のリンクから Flutter SDK（zip）を取得します。

Flutter SDK releases

取得した zip を解凍し、適当なフォルダに配置します。 公式では~/developmentに配置していますが、別のフォルダでも構いません。

その後解凍したフォルダにパスを通します。 bashを使用している場合は~/.bashrc、zshを使用している場合は~/.zshrcを以下を追加します。

export PATH=$HOME/development/flutter/bin

既にPATHの設定がある場合は、コロン(:)で繋げます。

export PATH=$HOME/development/flutter/bin:$HOME/.nodebrew/current/bin:$PATH

パスが正しく設定できていれば、flutterコマンドが使用できるようになります。 以下で動作するか確認してみてください。

$ flutter --version
Flutter 2.2.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f4abaa0735 (9 weeks ago) • 2021-07-01 12:46:11 -0700
Engine • revision 241c87ad80
Tools • Dart 2.13.4

プロジェクトの作成

以下のコマンドで Flutter プロジェクトを作成できます。

$ flutter create [project-name]

作成されたフォルダやファイルについてはこの記事では割愛します。

プロジェクトは以下のコマンドで実行することができます。 おそらくこの時点では、設定が不足しているため起動しないと思います。

$ flutter run

flutter doctor

flutter doctorというコマンドを実行すると、Flutter の設定が完了しているかをチェックすることができます。

設定ができている項目は[✓]、できていない項目は[!]が表示されます。 これがすべて[✓]になるように設定を行っていきます。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.5.2 20G95 darwin-x64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.59.1)

• No issues found!

Xcode

iOS 用に Xcode の設定を行います。 Xcode がインストールされていることが前提ですので、インストールされていない場合はApp Storeでインストールしてください。

• 以下のコマンドを実行し、Xcode を利用できるようにします。

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

• Xcode の使用許諾契約に同意するために、Xcode を起動するか以下のコマンドを実行して最後にagreeと入力します。

  $ sudo xcodebuild -license

• 以下コマンドで、iOS シミュレーターが起動することを確認します。

  $ open -a Simulator

• Flutter プロジェクトを起動し、iOS シミュレーターに反映されることを確認します。

  $ flutter run

• Xcode プロジェクトのライブラリ依存関係を管理するための Cocoapods をインストールします。

  $ sudo gem install cocoapods

• flutter doctorで Xcode の項目が[✓]になっていることを確認します。

Android Studio

Android 用に Android Studio の設定を行います。 Android Studio がインストールされていない場合は、以下のリンクからダウンロードしてください。

android studio

インストールが完了したら、作成したプロジェクトを開いておいてください。

• プラグインの追加
  メニューバーの「Android Studio > Performances」を選択します。 画面の「Plugins」を選択し、「Dart」と「Flutter」プラグインを検索して追加（Apply）します。
• SDK の追加
  メニューバーの「Tools > SDK Manager」を選択します。 SDK Tools タブを選択し、以下を追加（Apply）します。既に追加されているものは無視してください。
  • Android SDK Command-line Tools (latest)
  • Android Emulator
  • Android SDK Platform-Tools
  • Android SDK Tools
• プロジェクトの設定
  メニューバーの「File > Project Structure」を選択します。 画面の Project を選択し、「Project SDK」が設定されていることを確認してください。 設定されていない場合は「Android API XX Platform...」を選択してください。
• デバイスの追加
  メニューバーの「Tools > AVD Manager」を選択します。 「Create Virtual Device...」を選択し、デバイスを作成します。 基本適当で良いのですが、system image には API Level が Project SDK で設定したものと一致するようにしてください。
• プロジェクトの起動確認
  画面上の「no device selected」から追加したデバイスを選択し、デバイスが起動することを確認します。 その後「▶️」ボタンを選択して、Flutter プロジェクトがデバイスに反映されていることを確認します。
• Android ライセンスへの同意
  以下のコマンドを実行し、ライセンスへの同意を行います。

  $ flutter doctor --android-licenses

• flutter doctor
  flutter doctorで Android の項目が[✓]になっていることを確認します。

Visual Studio Code

開発用のエディタとして、Visual Studio Code を使用したい場合の設定です。 Android Studio など、他のエディタを使用する場合は無視してください。

• プラグインの追加
  以下のプラグインを追加します。
  • Dart
  • Flutter
  • Flutter Widget Snippets
• デバイスの起動
  Flutter プロジェクトを開いていると、画面右下にデバイスを選択する項目が表示されます。 ここに iOS と Android のデバイスが表示されていることを確認してください。 また選択した際に、それぞれが起動することを確認してください。
• プロジェクトの起動
  ターミナルからプロジェクトを起動します。 複数デバイスを起動している場合は、どれか 1 つを選択し、選択したデバイスにプロジェクトが反映されていることを確認してください。

  $ flutter run

最後にflutter doctorですべての項目が[✓]になっていることを確認してください。 なっていない場合は、表示されるメッセージを参考に対応してください。

これで環境構築は終了です。