flutter_memo.md

Flutter メモまとめ

• Flutter メモまとめ
  • Flutterの勉強参考
    • Zenn本
    • Webサイト
  • Dart基礎
    • コンストラクタ
    • factory
    • final
  • Firebase関連
    • 導入
    • Firebase Auth
    • Firestoreの操作
      • モデルクラス
      • withConverter
      • データの追加
      • データの取得
      • データの取得（リアルタイム）
  • さまざまなUI
    • NavigationRail サイドナビ
    • Expanded　と Flexible
    • ClipPath で描画
    • CustomPaint で描画

Flutterの勉強参考

Zenn本

• 作って学ぶ、FlutterとFirebaseを使ったアプリ開発
  • FirebaseでAuthenticationやfirestoreなどを扱う
• 入門 Riverpod
  • Riverpodをさらっと一通り扱う
• Flutter x Riverpod でアプリ開発！実践入門
  • Riverpodについて細かく解説
  • 更新も早いので、Riverpodについてはこれで十分な気がする
• Flutterの教科書 by Flutter大学
  • Flutter大学なので、初学者に優しい
  • Widgetの解説などが丁寧

Webサイト

• flutter-study.dev
  • 少し古いが、firebaseやproviderなどを一通りさらっと
  • Firebaseを使ったリアルタイムチャットは秀逸だったかも
• 【Flutter】dioを使ってAPI通信をする！サンプルを用いて解説
  • 通信周りとriverpodの使い方
  • 他の記事も結構参考になりそう

---

Dart基礎

コンストラクタ

• {...}をつけると、名前付き引数になる

class PixabayImage {
  final String webformatURL;
  final String previewURL;
  final int likes;

  PixabayImage({
    required this.webformatURL,
    required this.previewURL,
    required this.likes,
  });
}

factory

• factoryで、独自のファクトリーメソッドが作成可能

factory PixabayImage.fromMap(Map<String, dynamic> map) {
  return PixabayImage(
    webformatURL: map['webformatURL'],
    previewURL: map['previewURL'],
    likes: map['likes'],
  );
}

final

• finalをつけて初期値を与えれば、型を省略できる

---

Firebase関連

導入

• FlutterアプリにFirebaseを導入する方法はZennにまとめてある
  • FlutterにFirebaseを組み込む

Firebase Auth

• ID, Pass なら firebase_auth のみでOK
• Google Signin でログインするなら google_sign_in も使う
  • 参考 Flutter大学
• Android はフィンガープリントを用意
• iOS は Info.plist にスキームの戻り設定を追加する？？？
  • それだけだと、キャンセル時にクラッシュする様子

Firestoreの操作

モデルクラス

• snapshot ←→ モデルクラス
• 変換のための関数を用意しておくと良い

withConverter

• withConverterを使ってCollectionReferenceを作成しておくと便利.

final postsReference =
    FirebaseFirestore.instance.collection('posts').withConverter(
  fromFirestore: (snapshot, _) {
    return Post.fromFirestore(snapshot);
  },
  toFirestore: (value, _) {
    return value.toMap();
  },
);

データの追加

• add()の代わりにdocs().set()でもOK
• 参考
  • Firestoreでデータ保存

await FirebaseFirestore.instance
    .collection('posts')
    .add({
      'text': ........,
      'email': .......,
      'date': ........,
    });

データの取得

• FutureBuilderとQuerySnapshotを利用する
• 参考
  • Firestoreでデータ保存

FutureBuilder<QuerySnapshot>(
    future: FirebaseFirestore.instance
        .collection('posts')
        .orderBy('date')
        .get(),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        final List<DocumentSnapshot> documents = snapshot.data!.docs;
        // 以下省略.
      }
    },
)

データの取得（リアルタイム）

• FutureBuilderの代わりにStreamBuilderを利用する
• get()の代わりにsnapshot()を利用する
• それ以外は同じ
• 参考
  • Firestoreでリアルタイム更新

---

さまざまなUI

NavigationRail サイドナビ

• NavigationRail class
• 画面左側にアイコンを並べるようなナビゲーション

Expanded　と Flexible

• Row と Column の中で利用する
• 子要素を引き伸ばす、もしくは縮める
• 違いはこちら
  • Flexible と Expanded って何が違うんだっけ？

ClipPath で描画

• ContainerをClipPathでくり抜く
• Youtubeで概要説明

CustomPaint で描画

• pathなどで描画する
• Youtubeで概要説明