Androidアプリ、iOSアプリのクロス開発にFlutterを使ったりします。最近はデスクトップアプリやWebアプリもFlutterで作れるそうですがまだ試したことがないです。来年あたりチャレンジしてみたいですね。
Flutterを使ってモバイルアプリの開発も行う場合は、先にAndroidアプリの開発環境構築とiOSアプリの開発環境構築を整えておいた方がうまく動かない時などに原因の切り分けが行いやすいのでおすすめです。
目次
公式サイトのページの通り進めていきます。
まずは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
惜しい！2つだけxが出ていました。
でも事前にAndroidやiOSの開発環境を構築していたので、あらかたは整っている状態ですね。xが出ているAndroid周りの設定をしていきましょう。
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の開発環境が整いました。
それでは新しいプロジェクトを作成して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 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 を実行するだけです。
最初に動かす時はビルドに必要なライブラリのダウンロードなどを行うので少し時間がかかります。
動きました！
Androidと同じようにiOSシミュレータを動かしてflutter runを実行するだけです。
flutter emulators --launch apple_ios_simulator
シミュレータのデバイスが何も開いていない状態なので、メニューから[File]->[Open Simulator]->[動かしたい端末]をクリックして起動させます。
シミュレータが動いたら flutter run を実行します。
iOSも初回起動時はビルドに必要なライブラリのダウンロードなどで少し時間がかかります。
動きました！
Android StudioにFlutter用のプラグインをインストールして、開発・デバッグできるようにします。
まずはAndroid Studioを起動してメニューから[Android Studio]->[Preferences…]で設定画面を表示します。
PreferencesのPluginsを開いてflutterで検索します。
[Install]ボタンをクリックしてFlutterプラグインをインストールします。
インストールが終わると [Install] ボタンが [Restart IDE]に変わっているのでクリックしてAndroid Studioの再起動を行います。
Android Studioのメニューから [File]->[Open]で、Flutterのプロジェクトディレクトリ(hello_flutter)を選択して開きます。
開いた後は普通のAndroidアプリと同じように、ウィンドウ上部で動かすエミュレータを選択して▶️ボタンを押せば起動します。
モバイルアプリの開発だけ考えるとAndroid Studioを使って開発するのが便利そうなのですが、サーバサイドのTypeScriptの開発なども並行して行っている時はVSCodeだけで作業した方がやりやすかったりします。VSCodeからでもFlutterアプリを動かせるようにしておきます。
VSCodeを起動してコマンドパレットを開きます。（⌘+Shift+Pやメニューから[表示]->[コマンドパレット])
installで検索して「拡張機能:拡張機能のインストール」を実行します。
flutterで検索して Flutterプラグインをインストールします。
インストールが終わったら、VSCodeからFlutterのプロジェクトディレクトリを開きます。
ウィンドウ下部に動かす端末が表示されます。この部分をクリックすると、デバイスの選択が表示されるので、切り替えることができます。
F5キーやメニューから[実行]->[デバッグ実行]を選択して動かします。
