はじめにの前に(概要/対象読者)

概要

Flutterを使うと、簡単に動くアプリが作れる
FireBaseと連携するとサーバーレス開発もできる

対象読者

基本的なアプリ開発を経験している人
Flutterをいじってみたい人

はじめに

今年の3月に大学を卒業し、4月からアプリを作る会社に入社した者です。
SwiftUIと同じくらい？話題になっているFlutterの勉強会に参加してきたので、そのレポです。

Flutter・Firebaseでゼロからアプリをつくる。(connpassリンク)
勉強会資料
 サンプルコード

Flutterのダウンロードから実際にプロジェクトをrunするまで

アプリの開発環境(XcodeまたはAndroidStudio)が用意されている前提です

公式サイトからzipファイルをインストールする
公式サイトに従って環境構築する
英語ですがものすごく丁寧です、公式サイトを見ながら勉強会の資料を時折読めば詰まらずに構築できます

$ cd <プロジェクトルート>
# 解凍して
$ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip
# パス通して
$ export PATH="$PATH:`pwd`/flutter/bin"

テストのためにエミュレータを起動する
事前にエミュを起動していないとflutter runできないようです

$ open -a Simulator

プロジェクトを作る言語を指定する場合はオプションをつけます。デフォルトだとiOSはObj-C、AndroidはJavaになります

$ flutter create -i swift -a kotlin <アプリ名>
$ cd <アプリ名>

プロジェクトを実行する

$ flutter run

ダウンロード時に用意されていたアプリが起動できます。ぼたんぽちぽちー
というかこれだけでこれだけで動くアプリができるのすごいですね

今回の勉強会はハンズオンだったので「動けばいいや」で作っていましたが、ちゃんとした開発をする場合は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)
    ✗ Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for
      detailed instructions.
[!] 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
...........(略)

アプリを書き換えて機能追加する場合

メイン画面にあたる、lib/main.dartファイルを書き換えてUIを作成しましょう
もちろんlib/以下であれば複数ファイルに分けて書いてもOKです。

ex) カスタムテキストフィールドを作る場合

  final emailInputController = new TextEditingController();
  Widget _showEmailForm() {
    return TextFormField(
      controller: emailInputController,
      decoration: InputDecoration(
        border: const UnderlineInputBorder(),
        labelText: 'Email',
      ),
    );
  }

テキストフィールドや○○View、リスナーなど、一部の部品はWidgetとして用意されています。
TextFormFieldはテキストフィールドのWidget、TextEditingControllerは入力された文字列をリスナーに通知する、などの役割を持つWidgetです。
「iOSで言う所のTableView、Androidで言う所のListViewはFlutterだとListView」のような具合に大体のパーツが用意されているようです。

FireBaseと連携する場合

FireBaseと連携する際にiOSの場合バンドルID(Bundle Identifier)、Androidの場合パッケージ名が必要になります。その後ダウンロードされるplist(JSON)ファイルをXCode(AndroidStudio)のプロジェクトルートに配置します。

注意点

FireBaseなどの外部ライブラリを使う場合はpubspec.yamlを編集する必要があります。ファイル内のdependencies以下を編集し、pub getコマンドを叩きます。

(前後略)pubspec.yaml

# firebase及びfiewbaseと連携したGoogle analyticsを導入する場合
dependencies:
  flutter:
    sdk: flutter
  firebase_core: 0.4.0  # add dependency for Firebase Core
  firebase_analytics: 3.0.3  # add dependency for Google Analytics for Firebase
  firebase_database: 3.0.3
  firebase_auth: 0.11.1
  rapido: 0.1.9

$ flutter packages pub get

さいごに

本当はもう少し踏み込んだ実装をしたかったのですが、勉強会の時間の都合でここまでしか進められませんでした。UIがちょっと作れるだけではアレなのであれこれ試して追記していきたいです。
こちらも試してないのですが、同期から「デバッグモードでflutter runするとホットリロードせずに変更が反映されるから楽になる」とタレコミがありました。
Flutterでフロント開発して、FireBaseと連携してサーバーレスにアプリを開発...って、すごく「イマドキエンジニア」感があって高まりますね
~~(高まりだけで記事を書いたので着地点が迷子になったことは反省しています)~~

Flutter・Firebaseでゼロからアプリをつくる。【勉強会レポ】