Flutter開発環境構築から、iOS・Androidデモアプリ起動までやってみた。

Flutter開発環境構築

1.FlutterSDKのダウンロード
2.環境変数Pathの設定
3.Android Studioのダウンロードとインストール
4.Android Studioを起動し、コンポーネントをダウンロード
5.Flutter Pluginのインストール

FlutterSDKのダウンロード

まずは、Flutterの公式サイト（https://flutter.dev/）
からDocsを開き、Get Started OSの選択画面があるので、ご自身のPC環境に合わせてください。今回はMacを選択し、ダウンロードを開始します。

環境変数Pathの設定

export Path=$"Path:（フォルダへのパス）/flutter/bin"

・zshの場合 → .zshrcに追記
・bashの場合 → .bash_profileに追記
その確かめかたは、ターミナルを開きます。その上でecho $SHELLと入力すると、どちらかが判明します。

ターミナル

echo $SHELL

vimで該当のファイルを開き、先ほど開いた公式ドキュメントのページを少し下にスクロールすると、Update your Pathの内容をコピーして一番下に追記します。
[]の中身を自分のダウンロードしたフォルダまでのPathに変更します。

ターミナルを再起動し、Flutter doctorと入力します。これで問題なければOKです。

Android Studioのダウンロードとインストール

公式ドミュメントのページをさらに下にスクロールすると、Android setupというページがあるかと思います。Android Studioのリンクがあるのでクリックしサイトに飛びます。
こちらからも（https://developer.android.com/studio）

ダウンロードをクリック。ダウンロードが終わるとアプリケーションフォルダに移動し、起動させます。

Android Studioを起動し、コンポーネントをダウンロード

初期設定が少し必要です。以下のように進めてください。

next
Do not import settings -> OK
standard -> next
Darcula or Light どちらか好きなデザインを選択 -> next
Finish

Flutter Pluginのインストール

ConfigureからPreferencesを選択します。すると設定画面が出てくるので、Pluginsを選択し、Flutterを探しインストールします。Dartもセットでインストールするようになっています。Acceptで応じましょう。

インストールが完了すれば一度Android Studioを再起動します。

開発環境セットアップはこれにて完了です。
続いて、実際にエミュレーター（シミュレーター）を使ってアプリを起動してみようと思います。

iOS/Androidデバイスでアプリ起動

1.Flutter projectの作成
2.エミュレーターの設定
3.Androidアプリの起動
4.Xcodeのインストール
5.iOSアプリの起動

Flutter projectの作成

まずは、Android Studioから新規プロジェクトを作成します。
基本的にはデフォルトのままでOKです。Package nameだけお好きな名前に変更してください。Finishを押せば自動的にプロジェクトが作成されます。

エミュレーターの設定

AVD Managerのアイコンをクリックします。右から４番目にある緑色のAndroidマークです。Create Virtual Devicesをクリックし、お好きなデバイスを選択します。初めての場合はダウンロードする必要があります。

Androidアプリの起動

元の画面に戻ると、先ほどダウンロードしたデバイス名が表示されているかと思います。三角形のアイコンをクリックして仮想デバイスを起動させます。
Flutter Demo Home Pageというタイトルの青色の初期アプリが起動したはずです。＋ボタンを押してみると数字がどんどん増えていきますね。このようにとてもシンプルなアプリですが、無事に立ち上げることができました。

Xcodeのインストール

続いてiOSでも同じようにアプリを起動してみようと思います。App StoreからXcodeをインストールします。評価が低すぎてびっくりしますが、問題ないようです。ただかなり重く容量もあるのでかなり時間がかかります。

とりあえずFlutterを触ってみたかっただけという方は、Androidまでで十分かもしれません。
また、XcodeはMacユーザー限定です。Windowsでも何か方法はあるみたいですが、ここでは触れません。

iOSアプリの起動

インストールが完成すれば一度開いてみてください。少し指示に従って入力する必要がありますが、とても簡単なので安心してください。

Android Studioを再度開き、AOSP on |A Emulator(mobile)をクリックし、Open iOS Simulatorを選択します。iOSの仮想デバイスが立ち上がったかと思います。Androidと同じように実行してみましょう。さっきと同じようなアプリが起動していればOKです。

ここまでお疲れ様でした。

同じソースコードのままで簡単にAndroid・iOSと立ち上げることができるのです。まさにこれがFlutterの最大の特徴だと思います。

また、Flutterの公式サイトには、Showcaseの中にFlutterで開発された有名アプリサービスが載っています。ぜひ参考にしてみてください。