Zenn
🗒️

【Flutter】開発環境構築(for Mac)

2021/04/25に公開
Android
Flutter
iOS
Android Studio
Dart
tech

環境構築のゴール

Android Studioでの開発環境を構築し、エミュレーターで実行できることとします。

flutter SDKをダウンロードする

公式サイト
https://flutter.io/

  1. Get startedの遷移先でmacOSを選択
  2. Get the Flutter SDKの[flutter_macos_v○.○.○-stable.zip]をダウンロード
  3. 解凍したflutterフォルダを任意の場所に格納

パスを通す

システム環境変数にFlutterへのパスを設定することで、flutterコマンドがつかえるようになります。
以下ではflutterフォルダを、ユーザーディレクトリのdevelopフォルダに格納した場合のコマンドなので、格納場所に合わせて適宜書き換えて実行してください。

bashを使用している場合

echo 'export PATH=$HOME/develop/flutter/bin:$PATH' >> ~/.bashrc

zshを使用している場合

echo 'export PATH=$HOME/develop/flutter/bin:$PATH' >> ~/.zshrc

Flutter開発環境のインストール

以下コマンドを実行すると、Flutter開発に必要な依存環境が表示され、さらにそれらの環境が構築済みかどうかも表示されます。
英語ですが対応方法も一緒に表示してくれるので、不足しているものがあれば対応する。

flutter doctor
  1. Android toolchain - develop for Android devices
    Android関連の環境です。ライセンスへの同意を行っているかや、SDKのバージョンに問題が無いかなど。
    SDKのバージョンに関するメッセージが表示されていたら、Android StudioのSDK Managerで指定のSDKをインストールしましょう。
  2. Xcode - develop for iOS and macOS
    iOS向け開発に必要なXcode関連の環境です。
  3. Chrome - develop for the web
    Flutter for Webでの開発に必要な環境です。スマホアプリのみの開発であれば、ここが[!]になっていてもスルーして大丈夫です。
  4. Android Studio
    Android Studioをインストールします。
  5. VS Code
    VS Codeをインストールします。
    Android Studioのみで開発をする場合は不要なのでスルーしても大丈夫です。
  6. Connected device
    実機と接続されているか、ですが、開発はエミュレーターで進めれば良く、今接続されている必要はないのでスルーして大丈夫です。
    逆に何も接続していないのにここがチェックになっていればflutter devicesコマンドで、何が接続されているのか確認してみましょう。私の場合は以下のように表示されました。
    (for Webの開発向けに、Chromeがデバイスとして認識されているようです。)
Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.128

すべて対応すると以下のようになります。

[✓] Flutter (Channel stable, 2.0.5, on macOS 11.2.3 20D91 darwin-x64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.55.2)
[✓] Connected device (1 available)

Android Studioにプラグインをインストール

FlutterとDartのプラグインが必要です。
Android Studioを起動し、ConfigureのPlutinsにて、Flutterを選択肢しインストールします。
(一緒にDartのプラグインも自動でインストールされます。)

インストール後、Android Studioを再起動すると、Create New Flutter Projectというメニューが追加され、ここからFlutterの新規プロジェクトを始められるようになっています。

Flutterプロジェクトを作成する

Android Studio上で作成する場合

  1. Android Studio起動時に表示されるCreate New Flutter Projectからプロジェクトを作成します。
  2. プロジェクトのタイプを選択する画面が表示されますが、普通の単体で動作するアプリを作成するならFlutter Applicationを選択します。
  3. プロジェクトの情報を入力します。
  • Project name
    プロジェクト名です。ハイフン(-)を入れることはできませんので、単語を区切る場合はアンダースコア(_)を使用しましょう。
  • Flutter SDK path
    SDKのパスが正しいか確認します。
  • Project location
    プロジェクトフォルダを作成するディレクトリです。
  • Description
    プロジェクトの説明です。
  1. パッケージ名を入力します。
    プロジェクト名同様、ハイフン(-)を入れることはできませんので、単語を区切る場合はアンダースコア(_)を使用しましょう。
  2. 作成完了
    finishをクリックするとプロジェクトが作成されます。

flutterコマンドで作成する場合

以下コマンドを実行すると自動で作成されます。

flutter create <任意のパス>/<プロジェクト名>

Androidのエミュレータで動作を確認する

  • 以下手順でエミュレータの環境設定を作成します。
  1. AndroidStudioを起動する
  2. Tools > AVD Manager
  3. +Create Virtual Deviceをクリック
  4. 動作確認したい端末を選択
  5. Androidのバージョンを選択
  6. 任意の環境名をつけてfinish
  • AVD Managerで、作成した環境の▶(launchボタン)でエミュレータを起動します。
  • 以下コマンドでFlutterプロジェクトを実行すると、起動しているエミュレータ上でアプリの操作ができます。
cd <プロジェクトフォルダ>
flutter run

iOSのエミュレータで動作を確認する

  • 以下手順でエミュレータを起動します。
  1. Xcodeを起動する
  2. Xcode > Open Developer Tool > Simulatorでシミュレータを起動
    （シミュレータウィンドウの、File > Open Simulatorで端末を切り替えることができます。動作確認した端末が表示されていなければ、New Simulatorから端末の設定を追加します。）
  • 以下コマンドでFlutterプロジェクトを実行すると、起動しているエミュレータ上でアプリの操作ができます。
cd <プロジェクトフォルダ>
flutter run

Discussion