2023年1月31日 / 最終更新日時 : 2023年1月31日 システム開発部　森岡 技術ブログ

Flutterの開発環境構築

今回はFlutterの開発環境の構築についての手順を紹介したいと思います。

Flutterとは？

Flutter（フラッター）は、Googleによって開発されたフリーかつオープンソースのUIのSDKである。単一のコードベース[4]から、Android、iOS、Linux、macOS、Windows、Google Fuchsia[5][6]向けのクロスプラットフォームアプリケーションを開発するために利用される。

https://ja.wikipedia.org/wiki/Flutter

とのことで要は１つコードを書くと複数のプラットフォームで実行できるという素晴らしいツールです。

構成

2023年1月31日時点での環境を示します。

  • MacBook Pro(Intel)
  • macOS Ventura 13.1
  • IntelliJ IDEA Community Edition 2022.3.2
  • Android Studio Electric Eel 2022.1.1
  • Xcode 14.2(14C18)
  • Flutter 3.7.0
  • Dart 2.19.0

※ IntelliJ IDEAとAndroid StudioについてはJetbrains Toolbox経由でインストールしています。

Flutterのインストール

macOSなのでHomebrew経由でインストールします。

$ brew install flutter

インストールできたらFlutterのバージョンを確認してみます。

$ flutter --version

Flutter 3.7.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b06b8b2710 (7 days ago) • 2023-01-23 16:55:55 -0800
Engine • revision b24591ed32
Tools • Dart 2.19.0 • DevTools 2.20.1

Flutterの開発環境のチェックを行う

１回目のチェック

Flutterにはflutter doctorというコマンドがあり、開発環境のチェックを行うことができます。

早速実行してみます。

$ flutter doctor -v

[✓] Flutter (Channel stable, 3.7.0, on macOS 13.1 22C65 darwin-x64, locale ja-JP)
    • Flutter version 3.7.0 on channel stable at /usr/local/Caskroom/flutter/3.7.0/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (7 days ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1

[✗] 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 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    ✗ 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
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/tatsuaki/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2022.3.2)
    • IntelliJ at /Users/tatsuaki/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/223.8617.56/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.1 22C65 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 109.0.5414.119

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 3 categories.

上記の通り問題が３つあることがわかります。

エラー内容に従い問題を解決していきたいと思います。

Android toolchainのエラー

以下のようなエラーが表示されていました。

[✗] 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.

エラーの内容を読むとAndroid SDKが見つからないとのことです。

解決方法

この時点でAndroid Studioを起動していなかったため、Android Studioを起動することでAndroid SDKがインストールされることがわかりました。

２回目のチェックを実行

再度flutter doctorを使用してチェックを実行してみます。（今回は実行結果を一部のみ載せます）

$ flutter doctor -v

[✗] Android toolchain - develop for Android devices
    • Android SDK at /Users/tatsuaki/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.

[!] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    ✗ 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.

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/tatsuaki/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

! Doctor found issues in 3 categories.

まだ問題が３つありますね。順番に解決していきたいと思います。

Android toolchainのエラー

今回は以下のようなエラーが表示されていました。

[✗] Android toolchain - develop for Android devices
    • Android SDK at /Users/tatsuaki/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.

内容はコマンドラインツールがインストールされていないとのことです。

解決方法

内容の通りコマンドラインツールをインストールします。

1. Android Studioを開き、Settings→Appearance & Behavior→System Settings→Android SDKの順番に選択

2. SDK Toolsタブを選択し、Android SDK Command-line Toolsにチェックを入れ、Applyをクリック

３回目のチェックを実行

再度flutter doctorを使用してチェックを実行してみます。（今回も実行結果を一部のみ載せます）

$ flutter doctor -v

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/tatsuaki/Library/Android/sdk
    • Platform android-33-ext4, build-tools 33.0.1
    • Java binary at: /usr/bin/java
    ✗ Could not determine java version

[!] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    ✗ 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.

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/tatsuaki/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

! Doctor found issues in 3 categories.

まだ問題が３つありますね。問題が解決しても次の問題が出てきています。

順番に解決していきたいと思います。

Xcodeのエラー

Xcodeには以下のエラーが表示されていました。

[!] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    ✗ 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.

内容はcocoapodsがインストールされていないことのようです。

解決方法

cocoapodsをインストールすると良いようです。Homebrew経由でインストールします。

$ brew install cocoapods

４回目のチェックを実行

再度flutter doctorを使用してチェックを実行してみます。（今回も実行結果を一部のみ載せます）

$ flutter doctor -v

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/tatsuaki/Library/Android/sdk
    • Platform android-33-ext4, build-tools 33.0.1
    • Java binary at: /usr/bin/java
    ✗ Could not determine java version

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/tatsuaki/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

! Doctor found issues in 2 categories.

問題が２つに減りました。次の問題を解決したいと思います。

Android Studioのエラー

Android Studioには以下のエラーが表示されていました。

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/tatsuaki/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

内容を見てみるとJavaのパスが上手く通っていないようです。

解決方法

Flutterが参照しているJavaのパスとAndroid StudioのJavaのパスが違っているようなので

設定を変更します。

私の環境では以下のようなっていました。

（Jetbrains Toolbox経由であるため普通にインストールした場合とパスが違っています。）

/Users/{ユーザー}/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents/jbr

このjbrフォルダに対しシンボリックリンクjreを作成します。

sudo ln -nfs jbr jre

補足ですが、jbrはJetBrains Runtimeのことで、jreはJava Runtime Environmentのことです。

５回目のチェックを実行

再度flutter doctorを使用してチェックを実行してみます。（今回も実行結果を一部のみ載せます）

$ flutter doctor -v

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/tatsuaki/Library/Android/sdk
    • Platform android-33-ext4, build-tools 33.0.1
    • Java binary at: /Users/tatsuaki/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

! Doctor found issues in 1 category.

やっと問題が１つに減りました。最後の問題を解決していきたいと思います。

Android toolchainのエラー

以下のエラーが表示されていました。

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/tatsuaki/Library/Android/sdk
    • Platform android-33-ext4, build-tools 33.0.1
    • Java binary at: /Users/tatsuaki/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

内容はAndroid licenseの確認ができていないことのようです。

解決方法

上記のエラー内容の通りflutter doctor --android-licensesを実行し、ライセンスの確認を行えば良いです。

６回目のチェックを実行

再度flutter doctorを使用してチェックを実行してみます。

$ flutter doctor -v

[✓] Flutter (Channel stable, 3.7.0, on macOS 13.1 22C65 darwin-x64, locale ja-JP)
    • Flutter version 3.7.0 on channel stable at /usr/local/Caskroom/flutter/3.7.0/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (7 days ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/tatsuaki/Library/Android/sdk
    • Platform android-33-ext4, build-tools 33.0.1
    • Java binary at: /Users/tatsuaki/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
    • Android Studio at /Users/tatsuaki/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] IntelliJ IDEA Community Edition (version 2022.3.2)
    • IntelliJ at /Users/tatsuaki/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/223.8617.56/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.1 22C65 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 109.0.5414.119

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

問題は全て解決したようです。（No issues found!）

Flutterアプリケーションプロジェクトの作成

長かったですが、やっとプロジェクトの作成を行いたいと思います。

今回はIntelliJ IDEAを使用してプロジェクトを作成したいと思います。

IntelliJ IDEAにFlutterプラグインをインストール

IntelliJ IDEAを開き、Settings→Pluginsを選択し、検索バーでflutterと入力し、表示されたプラグインをインストール

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

IntelliJ IDEAを開き、New Projectをクリック

左側ペインのFlutterを選択し、Flutter SDK pathが空白の場合、FlutterのSDKパスを入力し、Nextをクリック

Project nameを入力し、Createをクリック

Flutterアプリケーションを実行

ツールバーのデバイス選択を適当なデバイスに設定し、実行する

今回はmacOS(desktop)を選択して実行してみました。

無事アプリケーションが表示されました。

終わりに

今回は便利なツールであるFlutterを紹介し、開発環境の構築をしてアプリケーションの実行までしてみました。

Flutterは簡単にクロスプラットフォームのアプリケーションが作成できるのでものすごく便利だと思います。

Dartという言語でプログラミングするため新しく言語を覚える必要はあると思いますが、

それに見合った開発体験ができると思います。

弊社にお仕事を依頼したいお客様がいらっしゃいましたら、以下のフォームもしくはメールにてお気軽にお問い合わせ下さい。

お問合せ

システム開発部 森岡（morioka_tatsuaki@computer-tb.co.jp）

カテゴリー
技術ブログ
タグ