Flutterの解説とSDKのインストール

こんにちはnasustです。Flutterを学び始めましたので、学びながら記事を書きます。

Flutterとはスマートフォン向けアプリのフレームワーク

FlutterとはGoogleが開発したスマートフォン向けアプリのフレームワークです。 iOSとAndroidで高品質なUI作成する事ができます。

開発言語はDartで、このプログラミングだけでiOSとAndroidに最適化されたアプリが開発出来ます。あとプレビュー版のみですがWebのSPAとしても開発する事が出来ます。

Flutterの開発で特に便利なのがホットリロードという機能です。高品質なアプリを開発するにはトライ & エラーを繰り返す事が多くなります。ホットリロードは素早く簡単に開発中の内容をエミュレーターまたは実機に反映させる事が出来ます。

Flutterのインストール

Flutteのサイトにアクセスして、Get startedをクリックして自分のOSに合うSDKのZIPファイルをダウンロードします。

展開したSDKを自分の開発用ディレクトリに移動します。私の場合はMacで~/Documents/Dev/sdk/flutterに置きました。

次に .bash_profileを開いてPATH環境変数を設定します。

export PATH=$PATH:~/Documents/Dev/sdk/flutter/bin
bash

パスが通ったら以下のコマンドを実行します。

$ flutter precache
bash

flutterが開発に必要なバイナリなどダウンロードしてくれます。

そしてFlutterで開発環境をチェックしてくれるflutter doctorコマンドを実行します。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale ja-JP)
 
[] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
[] Android Studio (version 3.4)
[!] IntelliJ IDEA Community Edition (version 2017.3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[] VS Code (version 1.35.1)
bash

と沢山問題が表示されました。この画面の通りにコマンドを実行して解決します。

もう一度、flutter doctorを実行します。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale ja-JP)
 
[] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[] Android Studio (version 3.4)
[] IntelliJ IDEA Community Edition (version 2017.3.7)
[] VS Code (version 1.35.1)
[] Connected device (1 available)

• No issues found!
bash

Flutterのアプリを実行

以下のコマンドでシンプルなアプリを実行します。

flutter create my_app
cd my_app
flutter run
bash

成功すればエミュレーターでアプリが起動します。

次回は簡単なアプリを開発します。

next