はじめにの前に(概要/対象読者)
概要
- 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
コマンドを叩きます。
# 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と連携してサーバーレスにアプリを開発...って、すごく「イマドキエンジニア」感があって高まりますね
(高まりだけで記事を書いたので着地点が迷子になったことは反省しています)