Flutterのインストール(for Mac)

参考サイト

macOS install

Flutterインストール(for macOS) - Qiita

1.Flutterのダウンロード

flutter sdk(ZIPファイル)をダウンロードします。

2. Flutterのインストール

ここでは、~/developmentにインストールする例で記載します。

・インストール用のディレクトリを作成
・作成したディレクトリに移動
・ダウンロードしたZIPファイルを展開

$ mkdir ~/development
$ cd ~/development/
$ unzip ~/Downloads/flutter_macos_1.22.2-stable.zip

.bash_profileを編集しPATHを設定します。

$ vi ~/.bash_profile

export PATH="$PATH:~/development/flutter/bin"

.bash_profileを読み込みます。

$ source ~/.bash_profile

プラットフォーム固有の開発バイナリをダウンロードします。

$ flutter precache
Downloading Android Maven dependencies...                          21.4s
Downloading android-x86 tools...                                    2.1s
Downloading android-x64 tools...                                    1.6s
Downloading android-arm tools...                                    2.7s
Downloading android-arm-profile tools...                            1.0s
Downloading android-arm-release tools...                            1.6s
Downloading android-arm64 tools...                                  1.8s
Downloading android-arm64-profile tools...                          0.9s
Downloading android-arm64-release tools...                          0.9s
Downloading android-x64-profile tools...                            1.0s
Downloading android-x64-release tools...                            1.0s
Downloading android-x86-jit-release tools...                        2.0s

2. Flutter環境のチェック

 flutter doctorを実行し、Flutter環境をチェックします。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v1.17.0-3.4.pre, on Mac OS X 10.15.7 19H2, locale ja)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
[!] Android Studio (version 3.6)
   ✗ Flutter plugin not installed; this adds Flutter specific functionality.
   ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.46.1)
   ✗ Flutter extension not installed; install from
     https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
   ! No devices available
! Doctor found issues in 3 categories.

・Android StudioのFlutter pluginとDart pluginが未インストール
・VS CodeのFlutter extensionが未インストール
・動作確認用の実機端末(デバイス)が未接続
という結果が出力されています。

メッセージを確認し、不足している環境設定を行います。

3. Android StudioのFlutter plugin/Dart pluginのインストール

Android Studioを起動
ツールバーから Android Studio >Preferenceを表示
左のリストからPluginsを選択
検索フィールドに"Flutter"を入力し、installボタンを押下

同様に"Dart"で検索し、Dart pluginもインストールします。

Flutter plugin/Dart pluginインストールが完了後、
Android Studioを再起動します。

Flutter doctorによるチェック結果

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v1.17.0-3.4.pre, on Mac OS X 10.15.7 19H2, locale ja)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
[✓] Android Studio (version 3.6)
[!] VS Code (version 1.46.1)
   ✗ Flutter extension not installed; install from
     https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
   ! No devices available
! Doctor found issues in 2 categories.

4. XCodeのインストール

・AppStoreからインストールします。
・コマンドラインから以下を実行します。
　新しくインストールされたXCodeを使用するように設定する

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
Password:

sudo xcodebuild -runFirstLaunch
Install Started
1%.........20.........40.........60.........80.........Install Succeeded

・XCodeを起動する、もしくは sudo xcodebuild -licenseコマンドを実行し使用許諾契約に署名します。

5. iOSシミュレータをセットアップ

$ open -a Simulator

6. シンプルなFlutterアプリの作成

・ワークスペースの作成(mkdir ~/workspace)
・作成したディレクトリに移動(cd ~/work)
・flutterプロジェクト"my_app"の作成(flutter create my_app)

$ mkdir ~/workspace
$ cd ~/workspace
$ flutter create my_app
Creating project my_app...
 my_app/ios/Runner.xcworkspace/contents.xcworkspacedata (created)
 my_app/ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
 my_app/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings
 (created)
 my_app/ios/Runner/Info.plist (created)
 :
 省略
 :
  my_app/.idea/workspace.xml (created)
Running "flutter pub get" in my_app...                              2.4s
Wrote 72 files.

All done!
[✓] Flutter: is fully installed. (Channel beta, v1.17.0-3.4.pre, on Mac OS X
   10.15.7 19H2, locale ja)
[✓] Android toolchain - develop for Android devices: is fully installed.
   (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS: is fully installed. (Xcode 12.0.1)
[✓] Android Studio: is fully installed. (version 3.6)
[!] VS Code: is partially installed; more components are available. (version
   1.46.1)
[✓] Connected device: is fully installed. (1 available)

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

 $ cd my_app
 $ flutter run

Your application code is in my_app/lib/main.dart.

7. flutterプロジェクト"my_app"の実行

・my_appディレクトリに移動(cd my_app)
・my_appプロジェクトの実行(flutter run)

 $ cd my_app
 $ flutter run
 Launching lib/main.dart on iPhone SE (2nd generation) in debug mode...

Running Xcode build...                                                  
                                                  
└─Compiling, linking and signing...                        51.0s
Xcode build done.                                           68.4s
Syncing files to device iPhone SE (2nd generation)...              122ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on iPhone SE (2nd generation) is available
at: http://127.0.0.1:50394/8LrP9PZDOmk=/

以上