Flutterの環境構築をしてみた(MacOS)

はじめに

Flutterを少し触ってみたいと思い、Mac環境で環境構築してみたのでメモ。

Flutterの公式ドキュメントはこちら

Flutter - Beautiful native apps in record time

MacOSでのインストール手順についてのドキュメントはこちら

macOS install - Flutter

基本的には上記手順で進めます。

Flutterのインストール

flutter_macos_1.17.5-stable.zipをダウンロードし、好きな場所に展開します。(ホームディレクトリに配置)

展開した中身はこんな感じでした。

f:id:dasuko:20200805020941p:plain

パスを通す

/flutter/binにパスを通す必要があります。

export PATH=$PATH:$HOME/flutter/bin

.zshrcに追記する。

flutter doctorコマンドで環境の確認

$ flutter doctor

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.4 19E287, locale ja)
 
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ! 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
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.47.3)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

これで何が足りないかわかるというわけですね!めっちゃ便利!

Android Toolchainのインストール

以下のコマンドを実行する

flutter doctor --android-licenses

こんか漢字のメッセージが出る。

同意するならyを入力する。

6 of 7 SDK package licenses not accepted. 100% Computing updates...             
Review licenses that have not been accepted (y/N)?

もう一度flutter doctorコマンドを実行してみる

$flutter doctor
[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.4 19E287, locale ja)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[!] 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
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.47.3)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

Android toolchainのところにチェックがつきました!

Xcodeの設定

Xcodeをインストールしていない場合はインストールする

(今回はXcodeインストール済みだったので割愛)

以下のコマンドを実行する。

 xcode-select --switch /Applications/Xcode.app/Contents/Developer

すると、Xcodeの部分もクリアになりました!

$flutter doctor
[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.4 19E287, locale ja)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.47.3)
    ✗ 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でPluginをインストール

Android Studioを起動してAndroid Studio>Preferenceを開きます。

Pluginsを選択します。

f:id:dasuko:20200805023032p:plain

flutterと検索するとflutterのPluginが出てきます

f:id:dasuko:20200805023145p:plain

DartのPluginも一緒にインストールすることになります。

f:id:dasuko:20200805023244p:plain

再度flutter doctorコマンドを実行すると、Android Studioの部分もクリアになりました!

$flutter doctor
[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.4 19E287, locale ja)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
[✓] Android Studio (version 3.5)
[!] VS Code (version 1.47.3)
    ✗ 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.

VS CodeでFlutter extensionのインストール

VS Codeを開いて、Extensionsでflutterと検索します。

f:id:dasuko:20200805023721p:plain

Installボタンを押して、Flutterをインストールします。

f:id:dasuko:20200805023737p:plain

再度、flutter doctorコマンドを実行してみます。

$flutter doctor
[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.4 19E287, locale ja)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.47.3)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

今回は端末を繋いでいないので、一旦環境構築はここで完了です

参考

Flutter - Beautiful native apps in record time

macOS install - Flutter

MacOSにflutterの環境を構築する - Qiita