FlutterでHello worldを動かす

仕事でFlutterを扱うことになったので、とりあえずHello world動かすところまでの流れをメモ。

「Flutterとは何ぞや？」って人は公式サイトを見てくれ。
Flutter - Beautiful native apps in record time

環境

Flutter SDKは、Windows、macOS、Linux向けに提供されていますが、本記事ではmacOS上での環境構築手順をまとめます。

OS	バージョン
macOS	Mojave バージョン10.14.6

Flutter SDKは「v1.9.1+hotfix.4」を使いました。

必要なコマンドラインツールは以下のとおりです。

bash
curl
git 2.x
mkdir
rm
unzip
which

※バージョンアップ等で本記事の情報が古くなっている場合は、公式ドキュメントを参照してください
Install - Flutter

Flutter SDKのインストール

まずはFlutter SDKをインストールします。
macOS install - Flutter

Flutter SDKのダウンロード

公式サイトから最新版SDKのzipファイルをダウンロードします。
本記事執筆時点のSDKバージョンは、v1.9.1+hotfix.6となっていました。

インストール対象フォルダに移動し、ダウンロードしたzipファイルを解凍します。

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.6-stable.zip

パスを通す

SDKを展開しただけではflutterコマンドが使えないので、パスを通します。

$ export PATH="$PATH:`pwd`/flutter/bin"

.bash_profileに直接追記しておけば、セッションを閉じても有効になります。

export PATH="/Users/unsoluble_sugar/flutter/bin:$PATH"

sourceコマンドで設定反映し、パスが有効になっていることを確認します。

$ source ~/.bash_profile
$ echo $PATH

開発用バイナリをダウンロード

必要に応じてプラットフォーム固有の開発バイナリをダウンロードします。

$ flutter precache

flutter doctorを実行する

セットアップ完了のために別途インストールが必要なツールがないか、依存関係をチェックします。

$ flutter doctor

flutter doctorコマンドを実行すると以下のようなログが表示されます。flutterコマンドが使用できない場合は、前述のパスが通っていないケースが多いです。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Mac OS X 10.14.6 18G103, locale ja-JP)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[!] Xcode - develop for iOS and macOS (Xcode 11.1)
    ✗ CocoaPods installed but not initialized.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that
        responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To initialize CocoaPods, run:
        pod setup
      once to finalize CocoaPods' installation.
[✓] Android Studio (version 3.5)
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.

[!] の付いている項目は準備が完了していない項目です。

Android、Xcode関連はのちほど設定するので無視してください。Connected device もデバッグ時に使用するものなので、いまは気にせず大丈夫です。

[✓] Flutter となっていない場合は、Flutterの設定まわりに何かしら問題が起きている状態です。表示されているメッセージを参照しながら対応しましょう。

基本的には指示通りに不足ツールをインストールしていけば解決します。

バージョン確認

flutter doctorでもflutterのバージョン確認はできますが、flutter --versionコマンドを打つと、使用されているDartのバージョンなども確認できます。

$ flutter --version

Flutter 1.9.1+hotfix.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision cc949a8e8b (4 weeks ago) • 2019-09-27 15:04:59 -0700
Engine • revision b863200c37
Tools • Dart 2.5.0

これでflutter SDKの設定は完了です。

iOSのセットアップ

続いてiOSのセットアップを行なっていきます。

Xcodeをインストールする

Xcodeの最新安定版をインストールします。公式Weｂサイト、もしくはMac App Storeからダウンロードします。

コマンドラインツールの設定

Xcode command-line toolsの設定をします。

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

一度もXcodeを起動していない場合の初期セットアップや、ライセンスの同意など、必要に応じて進めましょう。

iOSシミュレーターの実行

以下コマンドでiOSシミュレーターを起動します。

$ open -a Simulator

Xcode上から [Xcode] > [Open Developer Tool] > [Simulator] で起動することもできます。

サンプルアプリの作成

flutter createコマンドで新規プロジェクトを作成します。

$ flutter create my_app

シミュレーターを起動した状態でflutter doctorコマンドを打つと、Connected device項目が[✓]となっていることがわかります。

[✓] Connected device (1 available)

作成したプロジェクトフォルダに移動し、flutter runコマンドを実行しましょう。

$ cd my_app
$ flutter run

起動中のシミュレーター上でアプリが実行されます。

右下の「＋」ボタンをタップすると、画面中央の数字がカウントアップされるHello worldアプリらしい。

起動確認ができたらiOSのセットアップは完了です。

Androidのセットアップ

iOSの動作確認ができたので、Androidのセットアップも行なっていきます。

Android Studioのインストール

Android Studioをダウンロードしてインストールします。

Android SDK等のインストール

Android Studio Setup Wizardに従って、最新のAndroid SDK、Android SDK Platform-Tools、Android SDK Build-Toolsをインストールします。

Android Emulatorを作成

Android Studioを起動し、Welcome画面右下にある [Configure] メニューから [AVD Manager]を開きます。

適当にEmulatorを作成し、対象EmulatorのPlayボタンを押します。

Emulatorが起動します。

Emulatorが起動した状態でflutter runコマンドを実行すると、サンプルアプリが起動します。

簡単ですね。

iOS、Androidで同時に動作確認する

おまけ。

iOS Simulator、およびAndroid Emulatorを同時に起動した状態で以下コマンドを打ってみましょう。

$ flutter run -d all

複数OSでアプリ挙動を同時確認することが可能です。

すごい。

エディタはVSCodeがおすすめ

ちなみにエディタはVSCodeを使っています。

とりあえずFlutterとDartのプラグイン入れとけば、必要最低限の環境は整います。

VSCode上から新規プロジェクトの作成、エミュレーターの起動、デバッグまでひと通りこなせます。

FlutterにはHot reload機能もあるため、変更の確認が容易で高速開発が可能。
Hot reload - Flutter

すごい。