【Flutter入門】Flutterの環境構築 macOS
こんにちは、はるまきです。最近社内向けにFlutterの勉強会を開催し、簡単なTODOアプリのハンズオンをしました。その際のFlutterの環境構築について、今回は共有します。
またFlutterでの動作確認には大きく2種類あります。
・実際の端末で確認
・エミュレーターやシミュレーターで確認
お好みの方を選んでください。
ではさっそく環境構築を始めましょう。
Flutterをダウンロードする
こちらから公式サイトからダウンロードしてください。
https://docs.flutter.dev/get-started/install
適当なディレクトリにFlutterを配置
適当なディレクトリを作成してください。ダウンロードしたzipファイルをそこで展開してください。
(今回は勉強会だったので社名が入っておりますが無視してください。)
$ mkdir ~/seattle_flutter #適当なディレクトリを作成 $ cd ~/seattle_flutter #移動 $ unzip ~/Downloads/flutter_macos_1.20.3-stable.zip #ダウンロードしたzipを展開
↓zip展開後に、flutterディレクトリが出来上がっていればOK
パスを通す
flutterへのパスを通します。
zshの方はこちら↓
$ echo 'export PATH=$PATH:[YOUR_PATH]/flutter/bin' >> ~/.zshrc $ source ~/.zshrc #実行して反映
bashの方はこちら↓
$ echo 'export PATH=$PATH:[YOUR_PATH]/flutter/bin' >> ~/.bash_profile $ source ~/.bash_profile #実行して反映
※1 echo $SHELLで今、使用しているシェルがわかります。
※2 [YOUR_PATH]にはflutterディレクトリまでのパスを記入してください。
この記事の手順通りにしているなら、[YOUR_PATH]は"~/seattle_flutter"です。
flutterコマンドが使えるようになっていればOKです。
$ flutter
flutter doctor で環境を診断する
flutter doctorを使えば、自分のflutter環境が整っているかを調べてくれます。flutter doctor
$ flutter doctor
診断結果が表示されます。例
[-] Android toolchain - develop for Android devices
• Android SDK at /Users/obiwan/Library/Android/sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://docs.flutter.dev/setup/#android-setup for detailed instructions.
なお、各マークの意味は以下です。
問題のない箇所はピンマーク✔︎
不足しているものにはバツマーク✖︎
問題があるところにはビックリマーク！
最終的には全てがピンマークになればOKです。
Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.10.2, on macOS 12.2.1 21D62 darwin-arm, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 13.2.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.1) [✓] VS Code (version 1.64.2) [✓] Connected device (1 available) [✓] HTTP Host Availability • No issues found!
この時点ではAndroidとXcodeについてはビックリマーク！があって問題ありません。
また、別に全てがOKではなくとも動作確認をすることは可能です。
(ケースによるとは思いますが…)
以下の章ではAndroid StudioやXcodeなどの導入方法を紹介します。
Android Studio
Androidでも動作確認をしたい人は導入してください。
公式サイトからAndroid Studioをダウンロードします。
https://developer.android.com/studio/index.html
ダウンロードが完了したら起動し、表示にしたがってインストールしましょう。
Android Studio プラグインを導入
Android Studioのインストールが完了したら起動して、FlutterとDartのプラグインをインストールします。
起動画面のpluginから"Flutter"と入力してインストール
Android Studioでエミュレーターを導入 (実機のみで確認する方は不要)
Androidのエミュレーターを導入することで、Flutterで開発したものを擬似的に確認できるようになります。
エミュレーターの導入手順は以下です。
1, Android Studio起動画面から、Start a new Flutter projectを選択
2, Flutter Applicationを選択してNextをクリック
3, Project nameやCompany domainは任意の名前でOK
4, エディタが表示されたら、Virtual Deviceを作成
5, 自分の好きなデバイスやOSを選択する
6, 設定画面にてFinish
画像を載せておきます。↓
1, Android Studio起動画面から、Start a new Flutter projectを選択
2, Flutter Applicationを選択してNextをクリック
3, Project nameやCompany domainは任意の名前でOK
4, エディタが表示されたら、Virtual Deviceを作成
ツールバーのスマホアイコンからCreate deviceを選択
5, 自分の好きなデバイスやOSを選択する
6, 設定画面にてFinish
Androidのライセンスを許可する
Androidのライセンスの許可が必要です。
以下で実行できます。
$ flutter doctor –android-licenses
$ flutter doctor --android-licenses
実行してみて、もしAndroid sdkmanager not found的なことを言われたら、Android Studioの環境設定(Preference)から、SDK Command-lineToolsをインストールします。
より詳しく知りたい方はこちらの記事へ
この時点で、$flutter doctorを実行してAndroidの箇所がピンマークになっていればOKです。
Xcode
iosでも動作確認をしたい人は導入してください。
こちらからインストール可能です。
https://itunes.apple.com/jp/app/xcode/id497799835?mt=12
こちらの画面が表示されたらOKです。
CocoaPodsをインストールする
iosで動作確認するためにはcocoaPodsが必要です。
cocoaPodsはライブラリ管理ツールです。
ちなみに、CocoaPods自体はRubyで作られているようです。
$ sudo gem install cocoapods
なお、permission deniedされた場合は、
$ sudo gem install -n /usr/local/bin cocoapods
で回避できます。
最後にflutter doctorで確認する
最後にdoctorで確認しましょう。
もしどこかに不足があれば、お手数ですがご自身で調べてみてください。
以下のように全てがピンマークになれば完了です。
Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.10.2, on macOS 12.2.1 21D62 darwin-arm, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 13.2.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.1) [✓] VS Code (version 1.64.2) [✓] Connected device (1 available) [✓] HTTP Host Availability • No issues found!
動作確認をしてみる
では実際に動作確認をしてみましょう。まずは利用できるデバイスを確認します。
利用できるデバイスを確認する
flutter devicesでFlutterが認識しているデバイスを確認することができます。
$ flutter devices
例えば、以下のように表示されます。
connected devices: はるまきのiPhone (mobile) • 00001234-000E1XXXXXXX1001E • ios • iOS 15.1.1 19B81 iPhone 11 (mobile) • XXXXXX-11111-41111-XXXX-XXXXXXXXXX• ios • com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator) Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.109
３つのデバイスを検知していますね。
・私(はるまき)の実機のiPhone
・iosのシミュレーターのiPhone11
・Chrome (※flutterはweb画面の開発も可能です)
です。
状況としてはPCに実機のiphoneを繋げています。また、iosのシミュレーターも起動しています。
デバイスを検知すると、それぞれのIDも表示されます。
このIDを指定することで動作確認のデバイスを選択できると言うわけです。
【少し余談】 エミュレーターとシミュレーターの違い
言葉としては以下のような違いがあります。
シミュレータは外から見た振る舞いを再現するだけなのに対して、エミュレータは中身の動作まで再現する。
シミュレートは見た物・現象を真似し、エミュレートは内部の構造をマネする、というニュアンスの違い。
簡単に言うと、シミュレーターは外見だけを再現するのに対して、エミュレーターは中身まで再現する感じでしょうか。
そのため、Androidエミュレーター : Androidの中身まできちんと再現してますよ。iPhoneシミュレーター: iPhoneの外見だけ再現してお見せしますよ。
という違いがありそうですね。
言葉の違いがわかったところで、
次は、エミュレーターやシミュレーターを使った動作確認方法を紹介します。
Androidエミュレーターで確認してみる
Androidのエミュレーターを使って、動作確認をしてみましょう。
(先ほどの「Android Studioでエミュレーターを導入」↑を完了している必要があります。)
確認は簡単です。
1, 作成したflutterプロジェクトをAndroid Studioで開きます。
2, 右上にある緑の三角ボタンを押せばビルドが始まります。
3, エミュレータータブを選択すれば表示されます。
こんな感じでエミュレーターで確認できる。
iosのシミュレーターで確認する
iosのシミュレーターで確認してみましょう。
まずコマンドでopen -a Simulatorを実行します。
$ open -a Simulator
するとシミュレーターが起動します。
(シミュレーターが起動しない場合はXcodeに原因があると思います。)
シミュレーターを起動した状態で、
$ flutter devices
をすれば、シミュレーターが検知されます。
2 connected devices: iPhone 11 (mobile) • 6XXXXXXX-XXXXXXXXXXX-XXXXXXXXXXXX • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator) Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.109
今回起動しているiosのシミュレーターのiPhone11のIDは6C2935C7-1D89-4B81-AECD-75A48CB2B9ADです。
これを以下のように指定して、flutter runすれば起動します。
$ flutter run -d 6XXXXXXX-XXXXXXXXXXX-XXXXXXXXXXXX
Androidの実機で確認する
Androidの実機で確認してみましょう。
手順は以下です。
1, AndroidをPCに繋げる。
2, (Android端末の設定画面でUSBデバッグをONにする。 ※設定→システム→開発者向けオプション→USBデバッグ)
3, flutter devicesでID確認
4, flutter run -d [ID]を実行
なお、AndroidStudioをインストールしていないとエラーになります。
iosの実機で確認する
iosの実機で確認してみましょう。
手順は以下です。
1, iphoneをPCに繋げる
2, flutter devicesでID確認
3, flutter run -d [ID]を実行
なお、iosのバージョンが高いと(?)、Xcodeから実行する必要があるようです。
まとめ
最後まで読んでいただきありがとうございます。
今回はFlutterの環境構築について触れました。
クロスプラットフォームでいけいけのFlutterを少しでも早くマスターしたいです！
それでは、また。