はじめてのFlutter〜環境構築前編〜

Flutter

新しくReactNativeを使う予定だったのですが、予定変更でFlutterでやるよ！ということになったので、Flutterはじめました。
ので、今日はその環境構築メモの前半戦を記載していきたいと思います。

DLに時間がかかるものリスト

先にDLをしかけながら読んでいるとスムーズかもしれません。

Flutterとは？

flutter.dev

Googleが開発している、OSSでモバイルアプリ開発FWでありSDK。開発言語もGoogle開発のDart。
ひとつのコードでiOS、Androidの両方に対応した開発ができる。Google開発なのでFirebaseなどのGoogleアプリとの連携しやすさもポイント。
2018年12月に1.0がリリースされたばかりで、まだ新しいFWです！

Flutterの押しポイントは3つ。

  • Fast Development

    without losing state, on emulators, simulators, and hardware for iOS and Android.

保存すると自動でビルドしてくれる機能なのですが、いわゆるホットリロードと違って状態を保ったまま反映してくれる機能。すごい！！

  • 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をよりよくする為に、どんな機能を使っているか送信してもいいですか、というやつ。お好みに合わせて。

が、時間切れなので、今日はここまで！

また明日、後編をアップいたします😊