Zenn
Open5

【Udemy 学習メモ】【網羅編】FlutterとFirebase / SNS作成を通じて基礎から応用までステップアップする

Firebase
Flutter
Dart
はーぷしーるはーぷしーる

セクション2 最初のアプリを立ち上げる

pub

FlutterとDartのパッケージマネージャのこと

コマンド

flutter pub get：pubspec.yamlに記されたパッケージをインストールする。

flutter pub add パッケージ名：pubspec.yamlにパッケージを追記 + flutter pub getコマンド

flutter pub remove パッケージ名：パッケージを削除する。

pubspec.yaml

Flutterプロジェクトの設定ファイル
パッケージのバージョンやプロジェクトが必要とする依存関係が記述されている。

Dart文法

文字列リテラル内で変数の展開

main.dart
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
main.dart
  @override
  Widget build(BuildContext context) {
：
Text(
  '$_counter',
  style: Theme.of(context).textTheme.headline4,
),
：
}

'$_counter'のように、文字列リテラル内で$マークを変数名につけると、変数の中身を展開して文字列として表示できる。

アクセス修飾子

変数前に_をつけるとprivate、つけない場合はpublicとなる。

class Person {
  String name = ""; // public
  int _age = 0; // private
}

デバッグバナーの削除


デバッグ時、画面右上にあるバナーを削除したい場合はMaterialApp()のdebugShowCheckedModeBannerにfalseを指定する。

main.dart
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // デバッグバナー削除
      title: title,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
はーぷしーるはーぷしーる

セクション3 Firebaseを使ってみよう

Firebase

モバイルアプリにおけるバックエンド機能をクラウドで提供するGoogleのサービス

FlutterFire

FlutterアプリケーションがFirebaseのサービスを利用できるようにするプラグイン

Cloud Firestore

GoogleのNoSQLクラウドデータベース

非同期処理

  • 同期処理：コードを上から順番に実行する。処理が実行中だと次の処理を実行できない。
  • 非同期処理：コードを上から順番に実行するが、処理が実行中でも次の処理を実行できる。

Flutterで非同期処理を実装する場合はFutureクラスとasync/awaitを使用する。

はーぷしーるはーぷしーる

セクション4 実際にSNSを作ってみよう

Freezed

build_runner

Dartのソースコードを自動生成するパッケージ

flutter pub run build_runner build実行時のWarning

flutter pub run build_runner <コマンド名>でbuild_runnerが提供するコマンドを実行できる。

$ flutter pub run build_runner build
Deprecated. Use `dart run` instead.

コマンドが非推奨なのでdart run build_runner build に変更

$ dart run build_runner build
[WARNING] json_serializable on lib/domain/firestore_user/firestore_user.dart:
You are missing a required dependency on json_annotation in the "dependencies" section of your pubspec with a lower bound of at least "4.8.1".

json_annotationパッケージが存在しないという内容なのでパッケージを追加するとWarningを解消できた。

$ flutter pub add json_annotation

本セクションの使用コマンド

  • flutter run : Flutterのアプリを起動する
  • flutter clean : buildと.dart_toolディレクトリを削除する。

Dart文法

dynamic

動的な型付けが可能な修飾子（＝どの型でも代入できる）
Freezedではパッケージ独自の型（FirestoreのTimestamp型など）は使えないので代わりにdynamicを使う

Firebase Authentication

ユーザー認証機能を提供する

TextEditingControllerクラス

編集可能なテキストフィールドのコントローラ
TextEditingControllerと連携したテキストフィールドの入力内容や選択範囲を読み込むことができる

Firebase Authの例外の書き方

catchの前にon FirebaseAuthExceptionを追加する

try {
// 処理   
} on FirebaseAuthException catch (e) {
  print(e.toString());
}

Provider

Flutterで状態管理するためのライブラリ

ConsumerWidgetクラス

Providerの変更を監視するStatelessWidgetのこと
変更されたときにUI が自動的に更新される

はーぷしーるはーぷしーる

VSCodeショートカットキー

注意：著者のMacではCmdとCtrlキーを入れ替えています

  • Ctrl + . ：ウィジェットをWrapする
  • F12 ：メソッドなどの定義に移動する
  • Cmd + - ：移動先から元の位置に戻る
  • Cmd + `：ターミナルに移動
  • Cmd + 1：エディタに移動
  • Ctrl + P：ファイルを検索