Flutter生活1日目~Hello World編~ #Flutter

はじめに

普段モバイルアプリの開発をしています。
ある日、上司から急に
「FlutterでよしなにWebViewでサイト表示するサンプルとかないかなぁ^^」
「対応するOSはAndroidとiOSだけでいいよ^^」
と勅命を受けてしまいました。

この記事はそんな僕が、初めてのFlutterに挑戦する日々を綴って行きたいと思います。

Flutterとは？

とりあえず公式ページを読んでみましょう！

ほぅほぅなるほど、ネイティブに厚めなクロスプラットフォームかな？
ちなみにDartで開発するんですね！

Flutterは、モバイル、Web、デスクトップ向けの美しいネイティブコンパイルされたアプリケーションを単一のコードベースから構築するためのGoogleのUIツールキットです。

ホットリロード！これはエモい！
開発効率はかなり良いかもしれませんね！

迅速な開発
Flutterのホットリロードは、すばやく簡単に実験、UIの構築、機能の追加、バグの修正を迅速に行うのに役立ちます。エミュレータ、シミュレータ、およびiOSとAndroidのハードウェアで、状態を失わずに1秒未満のリロード時間を体験してください。

マテリアルデザインが中心なのかな？ちょっと組みづらいかもしれないですね。(偏見)
デザインが大変なのはクロスプラットフォームの宿命だと思うので気合いでカバーでしょ！

表現力豊かで美しいUI
Flutterに組み込まれた美しいマテリアルデザインとクパチーノ（iOSフレーバー）ウィジェット、リッチモーションAPI、スムーズな自然なスクロール、プラットフォーム認識でユーザーを喜ばせます。

パフォーマンスが良いのかー！
別に求めてるわけではないですが、あるに越したことはないですからね！
中身が気になりますね！今後漁ることにしましょう！

ネイティブパフォーマンス
Flutterのウィジェットには、スクロール、ナビゲーション、アイコン、フォントなど、プラットフォームの重要な違いがすべて組み込まれており、iOSとAndroidの両方でネイティブパフォーマンスが完全に提供されます。

なんとなくですが、こんなイメージを持つことができました！
・Dartで開発するので、モダンな言語やってる人たちにとってはそんなに壁はなさそう。
・Dartのエンジニアが少ないのがちょっとネックかも？(実際に使うときに人集まるかな...？)
・デザイン組むのが大変そうだけど、コンポーネントは多そう。
・ホットリロードありがてえ...！ありがてえ...！

イメージがあっているかはわからないので、とりあえずやってみることにします！

やってみた

当方mac環境なので、こちらの手順に沿ってやってみることにしました。

忙しい人はこれを叩いてもらえれば大丈夫です！

flutter_install.sh

#!/bin/bash
set -Ceu

# FlutterのDLファイル名(バージョンが変わったら変更すること！)
FLUTTER_DOWNLOAD_NAME="flutter_macos_v1.9.1+hotfix.6-stable.zip"

# FlutterのSDKをダウンロードして回答します。
curl -O "https://storage.googleapis.com/flutter_infra/releases/stable/macos/$FLUTTER_DOWNLOAD_NAME"
unzip $FLUTTER_DOWNLOAD_NAME

# Flutterのパスを通します。
export PATH="$PATH:`pwd`/flutter/bin"

# 開発用バイナリを事前にダウンロードします。
flutter precache

この時点でflutter doctorをすると、足りないものが表示されるので、適宜調べて解決しましょう！
僕はAndroid Studioの色々なものが抜けていたので追加しました。

bash.sh

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.14.4 18E2035, locale ja-JP)

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Android Studio (version 3.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

環境整えるところまではできたようなので、今回はiOSのシミュレーターでHello Worldしてみたいと思います。

まずはシミュレーターを起動します。
起動した状態でないと、flutterのアプリをインストールするときに起動できないようなので要注意です。

$ open -a Simulator

次にプロジェクトを作ります。
プロジェクトはflutter createコマンドで作成するようです。

色々とオプションがあるみたいですね。

bash.sh

$ flutter create -h
Create a new Flutter project.

If run on a project that already exists, this will repair the project, recreating any files that are missing.

Usage: flutter create <output directory>
-h, --help                     Print this usage information.
    --[no-]pub                 Whether to run "flutter pub get" after the project has been created.
                               (defaults to on)

    --[no-]offline             When "flutter pub get" is run by the create command, this indicates whether to run it in offline mode or not. In offline mode, it
                               will need to have all dependencies already available in the pub cache to succeed.

    --[no-]with-driver-test    Also add a flutter_driver dependency and generate a sample 'flutter drive' test.
-t, --template=<type>          Specify the type of project to create.

          [app]                (default) Generate a Flutter application.
          [package]            Generate a shareable Flutter project containing modular Dart code.
          [plugin]             Generate a shareable Flutter project containing an API in Dart code with a platform-specific implementation for Android, for iOS
                               code, or for both.

-s, --sample=<id>              Specifies the Flutter code sample to use as the main.dart for an application. Implies --template=app. The value should be the
                               sample ID of the desired sample from the API documentation website (http://docs.flutter.dev). An example can be found at
                               https://master-api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

    --list-samples=<path>      Specifies a JSON output file for a listing of Flutter code samples that can created with --sample.
    --[no-]overwrite           When performing operations, overwrite existing files.
    --description              The description to use for your new Flutter project. This string ends up in the pubspec.yaml file.
                               (defaults to "A new Flutter project.")

    --org                      The organization responsible for your new Flutter project, in reverse domain name notation. This string is used in Java package
                               names and as prefix in the iOS bundle identifier.
                               (defaults to "com.example")

    --project-name             The project name for this new Flutter project. This must be a valid dart package name.
-i, --ios-language             [objc, swift (default)]
-a, --android-language         [java, kotlin (default)]
    --[no-]androidx            Generate a project using the AndroidX support libraries

Run "flutter help" to see global options.

今回は特に難しいことをしたいわけではないので、アプリ名を適当につければ問題なさそうです。

bash.sh

$ flutter create my_app

(中略)

In order to run your application, type:

  $ cd my_app
  $ flutter run

Your application code is in my_app/lib/main.dart.

アプリケーションを動かす時の指定が出てきましたね。
言われたままにやってみると...

できた！(画面はちょっと動かした後)
これで僕もFlutterエンジニアの仲間入り！

追記

PC再起動した時にPATHに反映されないことに気づきました。(すっとぼけ)
忘れずに~/.bash_profileに追加しておきましょう！

~/.bash_profile

export PATH="$PATH:`${Flutterのパス}`/bin"