Flutter入門[2]: Flutterでとりあえずシミュレータ動かしてみる on macOS

Flutter入門の2日目です。

今回はシミュレータ動かすところまでやってみようかと思います。
iOS, Androidどちらのシミュレータも動かしますが、開発環境はmacOSです。

Flutter SDKのインストール

以下の内容は、2020/06/16現在のFlutter1.17.3に関するものです。
もしバージョンアップしていたら下記手順で上手くいかなくなっている場合もあります。

システム要件

1. OS: macOS(64-bit)
2. ディスク要領: 2.8 GB(IDEとかツールは含めない)
3. 以下のコマンドラインツール(進めてたらエラーで出てくれる気もしますが、入れといた方が無難です。)

• bash
• curl
• git 2.x
• mkdir
• rm
• unzip
• which
• zip

---

固定バージョンのインストールをしたくなかったら1.と2.は飛ばして3.に進んで下さい。

1.SDKのダウンロード

こちらのサイトの"Get the Flutter SDK"の下あたりにあります。

2.開発用ディレクトリにダウンロードしたzipを開く

1.と2.を飛ばした人、Gitから持ってくる場合

1.と2.をやった人はここを飛ばして下さい。
固定バージョンのインストールをしたくない場合にはFulutterのレポジトリから持ってきて下さい。

$ git clone https://github.com/flutter/flutter.git
$ git clone https://github.com/flutter/flutter.git -b stable --depth 1

3. パスを追加

Flutterディレクトリに遷移した状態で

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

またはプロファイル(.bash_profile or .zprofile)に追加して下さい。
※というかプロファイルに追加しましょう。
よくわからない人は"bash_profile パス 追加"とかで調べてみて下さい。

4.必要に応じて、開発用バイナリをプリダウンロード

$ flutter precache

AndroidやiOSの開発に必要となるバイナリファイルを事前にダウンロードするかどうか。
多分インストールしなくても後ですることになるだけだから大丈夫だけど、一応しておきました。
※このダウンロードするものをオプションで指定したかったら先に

$ flutter help precache

5.他に何かインストールする必要がないかどうか確認

＄ flutter doctor

足りないものがないかどうかメッセージが出て、インストール手順も概要レベルだけど出てくれる。
因みにやったときには以下の文言が出たためそれぞれ対応。

• AndroidStudioが無いよ。
  →入れたけどFlutterプラグインとDartプラグインが無いよって言われたから入れた。

• Android SDKが無いよって言われたから指示通りにAndroidStudioを起動。

• XcodeのCocoaPodsが無いよって言われたから入れた。

-デバイスが何もつながってないよ。
→これは別に開発時じゃなければエラーのままでいいと思います。
一応挙動確かめたかったので適当に繋げたらクリアになりました。

プラットフォーム毎のセットアップ

iOSセットアップ

1.Xcodeのインストール

最新のstableバージョンをインストール

2.Xcodeの設定

複数Xcodeが入っているような場合には新しくインストールしたXcodeを指定

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

以下はビルド用のコマンドらしいけど、オプションをつけることでパッケージのインストールとライセンスの同意ができる。

$ sudo xcodebuild -runFirstLaunch

3.Xcodeのライセンス確認

ライセンスへの同意を行う。

$ sudo xcodebuild -license

※古いバージョンだと上手く動かないことがあるらしいからFlutterを使うときには最新版のXcodeを使うことが推奨されています。

---

ここからはiOSとAndroidのシミュレータセットアップになります。
自分が開発する方だけでいいと思うので好きな方選んで下さい。

iOSシミュレータのセットアップ

1.シミュレータの起動

$ open -a Simulator

2.64-bitのデバイス(iPhone 5s以降)を使っていることを確認

Simulatorのバージョン: 11.4.1
「Hardware > Deviseメニューから」って公式には書いてあったけど、まずHardwareっていうメニューからなかった。File > Open Deviseメニューから開くデバイスのバージョン確認と変更ができたのでそこで確認。

3.環境によっては画面からはみ出しちゃうこともあるらしいその時はWindow > Scaleメニューから設定。

って書いてあったけどScaleメニューが無い。Phisical Sizeとかあるからそれ選ぶと実際の物理サイズにしてくれる。

Androidセットアップ

1.Android Studioのインストール

以下のツールの最新のものが必要となる。

• Android SDK
• Android SDK Command-line Tools
• Android SDK Build-Tools

※Standerdを入れて、FlutterとDartのプラグインのみインストールした状態

2.デバイスのセットアップ

2-1.デバイス上で開発者オプションとUSBデバッグを可能にしておく。

2-2.WindowsだとGoogle USB Driverが必要

2-3.デバイスをコンピュータと繋ぐ

デバイス上にアクセス許可を求められたら許可する。

2-4.ターミナルで以下コマンドを実行し、Flutterがデバイスを認識することを確かめる。

$ flutter devices

デフォルトだとFlutterはadbツールに基づくAndroid SDKのバージョンを利用する。
別のAndroid SDKを使いたい場合にはANDROID_HOME環境変数にて指定

Androidエミュレータのセットアップ

1.マシン上でVM accelerationを可能にしておく。

2.Android Studio > Tools > Android > AVD Managerを起動し、Create Virtual Deviceを選択(このAndroid SubmenuはAndroid Projectの中でのみ表示される。)

→公式には括弧内のこと書いてあったんだけどWelcome to Android Studioの画面下のConfigureからAVD Manager起動できた。

3.デバイス定義を選択し、Nextを押す。

4.システムイメージの選択。x86またはx86_64のイメージ推奨

5.エミュレートされたパフォーマンスのもと、Hardware - GRES 2.0を選択

この部分は公式にはあるんですが、私の環境では出ませんでした。

6.AVDコンフィグが正しいことを確認し、Finishを押す。

7.AVDマネージャでツールバーのRunを押す。

シンプルなFlutterアプリの作成と起動

ここで実際にサンプルのアプリを作って各シミュレータにて実行してみる。

1.作成

$ flutter create my_app

2.起動

ディレクトリ遷移して起動

$ cd my_app
$ flutter run

起動して監視デバッグ用のURLが発行される。
画面にも出ているが、終わらせるときにはqを押す。

まとめ

どっちも試してみると結構な分量になってしまいました。
皆さんも上手くいったでしょうか。