Blog

ブログ

Macの開発環境構築2021 : Flutter開発環境構築

本田 克己
本田 克己 代表取締役プログラマ

Androidアプリ、iOSアプリのクロス開発にFlutterを使ったりします。最近はデスクトップアプリやWebアプリもFlutterで作れるそうですがまだ試したことがないです。来年あたりチャレンジしてみたいですね。

Flutterを使ってモバイルアプリの開発も行う場合は、先にAndroidアプリの開発環境構築iOSアプリの開発環境構築を整えておいた方がうまく動かない時などに原因の切り分けが行いやすいのでおすすめです。

Flutter SDKのインストール

公式サイトのページの通り進めていきます。
まずはFlutter SDKのzipファイルをダウンロードします。
ダウンロードしたらファイルを解答してパスの設定を行います。

公式サイトでは $HOME/development の下にzipファイルを解凍する例が記載されていますが、場所はどこでも構いません。ホームディレクトリに optディレクトリを作ったりしているのでこの中に入れるようにしてみます。

cd $HOME
mkdir opt
cd opt
unzip ~/Downloads/flutter_macos_ダウンロードしたバージョン-stable.zip


パスの設定も例も書かれています。

export PATH="$PATH:`pwd`/flutter/bin"

ターミナルで上記コマンドを実行するとflutterコマンドが使えるようになりますが、ターミナルを開き直すとパスの設定が消えてflutterコマンドが使えなくなります。
.zprofileなどにパスの設定を追加しておきます。以下の行を追加しました。($HOME/optに置いた場合)

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

ターミナルを開き直すとflutterコマンドが使えるようになります。
最初にflutterコマンドを実行するとWelcomeメッセージが表示されました。
他のツールなどでは利用状況の収集など事前に同意メッセージが表示されるものが多いですが、デフォルトで送信するようになっています。送信したくない場合は、–no-analyticsで設定を変更しておきましょう。

Flutter Doctorの実行

開発環境が整っているかflutter doctorコマンドで確認できます。
ターミナルで以下のコマンドを実行します。

flutter doctor

惜しい!2つだけxが出ていました。
でも事前にAndroidやiOSの開発環境を構築していたので、あらかたは整っている状態ですね。xが出ているAndroid周りの設定をしていきましょう。

cmdline-tools component is missing

Android SDKのコマンドが見つからないということですね。メッセージに従ってsdkmanager –install の実行を行います。sdkmanagerはAndroid Studioにバンドルされています。Android Studioを/Applicationに置いているので、以下のコマンドを実行します。

~/Library/Android/sdk/tools/bin/sdkmanager --install "cmdline-tools;latest"

実行してみたところXmlSchemaクラスが見つからないとエラーが出てしまいました。

Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
	at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
	at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
	at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
	at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
	at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
	at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581)
	at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
	at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
	... 5 more

実行に必要なJavaのライブラリが不足しているようです。
仕方がないのでAndroid StudioからSDK Managerを動かしてインストールしました。
SDK Managerの画面から[Android SDK] -> [SDK Tools]タブを開いてAndroid SDK Command-line Toolsにチェックを入れてインストールします。

インストールが終わったら、再度 flutter doctorを実行します。

command-line toolsの項目は消えました。残るはライセンスの同意です。ターミナルでflutter doctor –android-licensesコマンドを実行します。

flutter doctor --android-licenses
5 of 7 SDK package licenses not accepted. 100% Computing updates...             
Review licenses that have not been accepted (y/N)? y

1/5: License android-googletv-license:

Review. licenses…のところで y を押してエンター
ライセンスが表示(この時は5個)表示されるので、ライセンスをよく読んで y を押してエンターを繰り返します。
ライセンスへの同意を行ったら、再度 flutter doctor を実行します。

やったね!オールグリーンです!
Flutterの開発環境が整いました。

Hello Flutter

それでは新しいプロジェクトを作成してAndroidアプリ、iOSアプリとして動作することを確認しましょう。

flutter createコマンドで新しいプロジェクトを生成します。

flutter create hello_flutter

Creating project hello_flutter...
  hello_flutter/test/widget_test.dart (created)
(中略)
Wrote 81 files.

All done!
In order to run your application, type:

  $ cd hello_flutter
  $ flutter run

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

生成したら出力されているメッセージの通り、ディレクトリを移動してflutter runで実行します。

Webアプリで動いちゃいました!
Flutter 2からはWebアプリ対応が組み込まれていて、エミュレータで端末が接続されていない場合は自動的にWebアプリとして動くようです。

Androidアプリとして動かす

実際の開発ではAndroid StudioやVSCodeを使って、アプリの実行も開発環境から操作しますがまずはターミナルのコマンドから実行してみます。

Android エミュレータを動かした状態で flutter run コマンドを実行すれば自動的にAndroidアプリとして実行されます。
flutter emulatorsで設定済みのエミュレータが確認できます。設定が必要な場合はAndroid StudioなどからAVD Managerを動かしてエミュレータの追加などを行います。

flutter emulators
4 available emulators:

apple_ios_simulator       • iOS Simulator             • Apple  • ios
Pixel_2_API_31            • Pixel 2 API 31            • Google • android
Pixel_3_API_31            • Pixel 3 API 31            • Google • android
Pixel_3a_API_31_arm64-v8a • Pixel_3a_API_31_arm64-v8a • Google • android

To run an emulator, run 'flutter emulators --launch <emulator id>'.
To create a new emulator, run 'flutter emulators --create [--name xyz]'.

エミュレータID(ここではPixel_2_API_31)を指定してエミュレータを起動します。

flutter emulators --launch Pixel_2_API_31

あとは flutter run を実行するだけです。
最初に動かす時はビルドに必要なライブラリのダウンロードなどを行うので少し時間がかかります。

動きました!

iOSアプリとして動かす

Androidと同じようにiOSシミュレータを動かしてflutter runを実行するだけです。

flutter emulators --launch apple_ios_simulator

シミュレータのデバイスが何も開いていない状態なので、メニューから[File]->[Open Simulator]->[動かしたい端末]をクリックして起動させます。

シミュレータが動いたら flutter run を実行します。
iOSも初回起動時はビルドに必要なライブラリのダウンロードなどで少し時間がかかります。

動きました!

Android Studioから動かす

Android StudioにFlutter用のプラグインをインストールして、開発・デバッグできるようにします。
まずはAndroid Studioを起動してメニューから[Android Studio]->[Preferences…]で設定画面を表示します。
PreferencesのPluginsを開いてflutterで検索します。
[Install]ボタンをクリックしてFlutterプラグインをインストールします。

サードパーティープラグインのプライバシーについて表示されるのげ Accept で許可します。
Dartプラグインも必要と表示されるので Install でインストールします。

インストールが終わると [Install] ボタンが [Restart IDE]に変わっているのでクリックしてAndroid Studioの再起動を行います。

Android Studioでプロジェクトを開く

Android Studioのメニューから [File]->[Open]で、Flutterのプロジェクトディレクトリ(hello_flutter)を選択して開きます。

開いた後は普通のAndroidアプリと同じように、ウィンドウ上部で動かすエミュレータを選択して▶️ボタンを押せば起動します。

Visual Studio Codeから動かす

モバイルアプリの開発だけ考えるとAndroid Studioを使って開発するのが便利そうなのですが、サーバサイドのTypeScriptの開発なども並行して行っている時はVSCodeだけで作業した方がやりやすかったりします。VSCodeからでもFlutterアプリを動かせるようにしておきます。

VSCodeを起動してコマンドパレットを開きます。(⌘+Shift+Pやメニューから[表示]->[コマンドパレット])
installで検索して「拡張機能:拡張機能のインストール」を実行します。
flutterで検索して Flutterプラグインをインストールします。

インストールが終わったら、VSCodeからFlutterのプロジェクトディレクトリを開きます。
ウィンドウ下部に動かす端末が表示されます。この部分をクリックすると、デバイスの選択が表示されるので、切り替えることができます。

F5キーやメニューから[実行]->[デバッグ実行]を選択して動かします。