新しくReactNativeを使う予定だったのですが、予定変更でFlutterでやるよ！ということになったので、Flutterはじめました。
ので、今日はその環境構築メモの前半戦を記載していきたいと思います。
DLに時間がかかるものリスト
先にDLをしかけながら読んでいるとスムーズかもしれません。
- Flutter SDK
- Android Studio
- XCode(App Storeからインストール)
Flutterとは？
Googleが開発している、OSSでモバイルアプリ開発FWでありSDK。開発言語もGoogle開発のDart。
ひとつのコードでiOS、Androidの両方に対応した開発ができる。Google開発なのでFirebaseなどのGoogleアプリとの連携しやすさもポイント。
2018年12月に1.0がリリースされたばかりで、まだ新しいFWです！
Flutterの押しポイントは3つ。
保存すると自動でビルドしてくれる機能なのですが、いわゆるホットリロードと違って状態を保ったまま反映してくれる機能。すごい！！
Expressive and Flexible UI
MaterialDesignとiOSのデザイン規範(Cupertino)を踏襲したfull-customizedなデザインを簡単に作れるし、レンダリングもめっちゃ早いよ！ということみたい。Native Performance
スクロールやナビゲーションなど、iOSとAndroidの違いを吸収してくれるので、どちらのプラットフォームでもNativePerfomanceが実現できるよ！ということみたい。
ざっくりFlutterの概要を理解したところで環境構築をしていきます。
FlutterSDKのインストール
わたしの環境はmacOS Mojave 10.14.3です。
System Requirementsは公式サイトにある通り。
公式サイトからSDKをダウンロード。回線によってはやや時間がかかります。
DLが完了したらzipファイルを好きなディレクトリに移して解凍。
ターミナルでそのディレクトリに移動、パスを通します。
pwd # => /Users/makicamel/dev export PATH="$PATH:`pwd`/flutter/bin"
これだけだと再起動するとパスが消えるので、永続化するには.bash_profileに書き込みます。
touch ~/.bash_profile vim ~/.bash_profile export PATH=$PATH:flutterを置いたPATH # 例えばこう # export PATH=$PATH:/Users/makicamel/dev/flutter/bin
.bash_profileは変更しただけでは反映されないのでsourceコマンドで反映します。
source ~/.bash_profile
確認はprintenvでできます。printenvだけだと環境変数全てが返ってきて読みにくいので、PATHを指定。
printenv PATH
flutter --verionを実行して、Welcome to Flutter!メッセージと共にバージョン情報が返ってきたらSDK設定が完了。
$ flutter --version Flutter 1.2.1 • channel stable • https://github.com/flutter/flutter.git Framework • revision 8661d8aecd (3 weeks ago) • 2019-02-14 19:19:53 -0800 Engine • revision 3757390fa4 Tools • Dart 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)
なお、もし必要なパッケージがインストールされていなくてエラーが出たときは、flutter doctorで確認できるそうです。
Android環境を構築
Android Studioにアクセス、「DOWNLOAD ANDROID STUDIO」から をダウンロードします。
900MBほどあるので時間がかかります。
ダウンロードが完了したらApplicationディレクトリにインストールし、設定を進めます。
Import Android Studio Settings from
-> 初回インストールなので「Do not import settings」を選択して起動します。Data Sharing
-> Android Studioをよりよくする為に、どんな機能を使っているか送信してもいいですか、というやつ。お好みに合わせて。
が、時間切れなので、今日はここまで！
また明日、後編をアップいたします😊
