このような疑問を実際に導入手順を説明します。
また、MacとWindowsでどっちで開発した方がいいのかも説明したいと思います。
【前提】Android Studioをインストールする
Flutterを開発するための統合開発環境(IDE)として公式が推奨しているのが、Android Studioです。
通常はAndroid for JavaやKotlinを使ったAndroid向けのモバイルアプリケーション開発ソフトです。無料でインストールし使うことが可能です。
注意点としてAndroid Studio自体はそこまで容量が大きくないですが、AndroidをPC上で仮想的に起動させるエミュレータが結構大きく1GB程度あります。
また、エミュレートする端末の数を増やすとその分多くの容量を使うので、記憶媒体の残量には注意しましょう。Macで256GBだと結構厳しいかもしれません。
MacとWindowsどちらも共通です。
Android Studio公式からインストーラーをダウンロードする
中央のDownloadボタン押してダウンロードその後、インストールしてください。
もしAndroid エミュレータの設定がある場合は後半に説明しているのでそちらを見てください。
【前提】xcodeをインストールする(Macの人だけ)
Macの人はApp Storeからxcodeをインストールしましょう。
Android Studioとは違い、通常のアプリケーションをApp Storeからインストールするのと同じなので
手順は省略します。
Flutterの開発環境をMacとwindowsで構築する
まずはMac側から行きます。と言ってもMacとwindowsの開発環境構築に大きな違いはあまりありません。
Mac用のFlutterを入手する
こちらでFlutterを入手できます。
macOSを選択してください。
上記画像のボタンでダウンロードできます。
注意ポイント
- 1GBくらいあります。もし、通信容量など制約がある環境の場合注意しましょう
- バージョンが可変になっても気にならない場合Gitを使う方法もあります。Gitでの操作の方が慣れているという場合はそちらでも良いかと思います。
MacにFlutterのPathを通す
エンジニアの方にとっては耳たこですが、Pathを通す作業です。
terminalを起動し下記コマンドを打って行きましょう。
cd [自分の設定するディレクトリ] unzip ~/Downloads/flutter_macos_1.17.5-stable.zip
Flutterをインストールしたい先にカレントディレクトリします。そこで先ほどダウンロードしたFlutterをunzip(解凍)していきます。
export PATH="$PATH:`pwd`/flutter/bin"
このコマンドでセッションのPathを通せます。一時的に使用したいという場合はこれでもOK。ただし、一度ターミナルを閉じるとパスがなくなってしまうので注意が必要です。
永続化する場合は、~/.bash_profileに上記のPathを追加しましょう。その後terminalを再起動しましょう。
flutter doctor
flutter doctorコマンドはPathを通すと使えるようになります。
あなたのPC内にFlutterの依存関係があるかをチェックし、もしライブラリやソフトが足りていない場合に教えてくれます。
flutter doctorでバツが表示された
別に壊れている訳ではありません。至って正常です。
通常初期導入では依存関係のあるライブラリなど入っているはずがないので、1つ1つ解決していくだけ。
また、flutter doctorの出力になんのコマンドを打てば良いか基本的には載っているのでその通りに打てば問題ありません。
最初はびっくりしますが大丈夫です。
Android toolchain - develop for Android devices (Android SDK version 27.0.3)
1つ目【Flutter requires Android SDK 28 and the Android BuildTools 28.0.3】
Android SDKが入っていないということです。SDKは開発するための開発ライブラリの寄せ集めみたいなものです。
Android StudioのConfigure>Android SDKの赤枠内の項目をアップデートしましょう。
2つ目【Android licenses not accepted. To resolve this, run: flutter doctor】
ライセンスに同意してくださいということです。出力コマンドの中にrun:と書かれているので、その後のコマンドをそのまま打ちましょう
flutter doctor --android-licenses
yを押してenterを何度か繰り返しどんどん同意しちゃいましょう。
Xcode - develop for iOS and macOS (Xcode 11.5)
1つ目【Xcode end user license agreement not signed; open Xcode or run the command】
sudo xcodebuild -license
Flutter doctorの指示通り打てばOK。同意してください。
2つ目【Xcode requires additional components to be installed in order to run.】
sudo xcodebuild -runFirstLaunch
こちらも指示があるので打てば大丈夫です。意味的にはxcode上でiosアプリをコンパイルするためのものかな？
3つ目【CocoaPods installed but not working.】
sudo gem install cocoapods
cocoapodsはiosアプリケーション開発時に用いられる管理ツールです。
Android Studio (version 3.1)
1つ目【Flutter plugin not installed; this adds Flutter specific functionality.】
Android StudioにFlutter pluginが入っていないということです。これはAndroid Studioで操作する必要があります。
Android Studio > plugin を開いてflutterで検索してInstallしましょう。
2つ目【Dart plugin not installed; this adds Dart specific functionality.】
Android StudioにDart pluginが入っていないという意味です。Flutterはツールであり、言語ではありません。
FlutterはDart言語を使うことでコーディングすることができます。
Flutter pluginを入れた時と同様にpluginからDartと検索してInstallしましょう。
Connected device
これは実際の端末に対する設定かと思われますが、今回はエミュレートでPC上のみで仮想的に動かすので無視します。
ここで一応下記コマンドをもう一度確認しましょう。
flutter doctor
warningとして無視したconnection deviceに関するエラー以外は全て解決できているかと思います。
Androidのエミュレータの設定
ここではPC上で仮想的に動かすエミュレータの設定を行います。
今回はAndroidのみの設定を行います。iosをエミュレートしたい場合は別途設定方法を調べて設定してください。
Android Studioでの操作が必要です。
AVD Manager > Create Virtual Device > 好きなデバイスを選んでNext > なるべく最新のAn x86 or x86_64を選んでNext > セレクトリストでHardware - GLES 2.0を選択してFinish
これで全て完了です。
次はWindows側の説明をします。
変わるのは最初のFlutterのインストールソフトウェアの選択の所とPathの通し方だけです。
WindowsでFlutterを設定する
ここに書いてないことは共通なのでMac側の説明を見てください。
FlutterのダウンロードサイトでWindows選んでダウンロードします。
続いてPathを通す部分です。
Windowsの場合は環境変数設定からPathを通します。
上記画像のPathの部分に
[自分の設定するディレクトリ]/flutter/bin
を追加してください。
その後コマンドプロンプト上でflutter doctorをチェックします。
flutter doctor
windowsにはterminalは無いのでコマンドプロンプトで操作します。
サンプルアプリを動かす
みなさんお待ちかねの起動までやっときました。
Flutterはまだまだ発展途上ということもあり、環境開発構築が少し大変な印象です。
環境構築は無事に終わったので起動するだけです。
Start a new Flutter projectでFlutterで新規アプリケーションを作ります。
Flutter Applicationを次の画面で選択するとサンプルアプリケーションが生成されます。
実行します！
すごく簡単にモバイルアプリケーションが動いてしまった・・・
サンプルアプリを起動しただけですが、既存のモバイルアプリケーション開発のハードルを知っていると結構感動します。
注意ポイント
Androidエミュレータを起動した状態で上部、デバイス選択リストでエミュレータを選択してから実行しましょう
Flutterの開発はMacとwindowsどっちで開発するべきか
Flutterを導入してサンプルを起動するところまでですが、どちらで開発するべきかについて現状の自分の意見を述べておきます。
iosアプリを作りたい時はxcodeが必要という特性上Mac以外の選択肢がないので一旦除外します。
もしMacの記憶媒体が512GB以上あるならMacで開発すべきです。（買う予定なら512GB以上のものを買った方がいい）
というのもモバイルアプリはエミュレータを入れる都合上、スマホのOSを丸々PC上に構築する必要があり必然的に容量が大きくなりがちです。また、Macでiosアプリが作れるという特性上アプリケーションエンジニアはMacを使っていることが多くネット上にも参考文献がたくさんあるため開発しやすいです。
上記の条件を満たせない場合にはwindowsでの開発をお勧めします。記憶媒体が安く購入できて増設も簡単なうえ、Macの同スペックのPCも半分くらいの値段で購入することが可能です。
おすすめの開発端末については、いつか記事で描こうと思います！
ここまで見てくださってありがとうございました！