1.環境セットアップ(2時間くらい)

Flutter

1.SDKのダウンロード・解凍

Install

2.PATH設定

以下をPATHに追加(ホームディレクトリの名前は適宜変更する)

/Users/{username}/flutter/bin

3.確認

以下のコマンドが実行できることを確認する

flutter

Android

1.Android Studioダウンロード⇛インストール

Install

2.確認

flutter doctor

※最初は5分くらい時間かかる

の結果でAndroid Studioがチェックマーク入ってるのを確認

4.Andoroid toolchainのエラー解消

・Command-Line Toolsのインストール(AndoroidSDKの設定画面からできる)

・Andoroidライセンスの許可

flutter doctor --android-licenses

※ javaのPATH通ってないとエラー出る

5.Android toolchainがチェックついてることを確認

flutter doctor

6.FlutterプラグインをAndoroid Studioからインストール

XCode(iOS)

1.XCodeをインストール

2.Cocoapodをインストール

brew install cocoapods
brew link --overwrite cocoapods

※バージョン指定している理由はエラー回避しようとした結果

3.XCodeにチェックがついてることを確認

flutter doctor

2.Flutterプロジェクト作成・デモアプリ実行(30分)

1.以下のように作成

2.仮想デバイス(iOS)を実装

3.仮想デバイス(Andoroid)を実装

System Image:何でもいいらしいのでPieに

4.アプリの実行 Android:

iOS:同じ見た目

Appendix.UIのデザインツール

3−1.Flutter Studio

WEB上でデザイン⇛コード生成できるが、

・慣れが必要そう、機能的にFigmaに劣ってそう

・コードを完全には使えない(クラス名がデフォルト、構文?が違う)

AppBuilder 2 20180529-19:35

3−2.Figma to Flutter

・生成されるコードがイマイチ

Figma to Flutter

3−3.Adobe XD

これは使ってないが、一番マシな気がする。ただし有償