🙄

FlutterでFirestoreからデータを取得する（null-safety）

2021/10/01に公開

Firebase

Firestore

Flutter

tech

Flutter初学者です。Flutterはものすごくアップデートが早いので今回はFirebsaseから値を取得するにあたって気をつけることを書きます。（2021年7月29日）　バージョンは以下のようになります。

・　firebase_core: ^1.3.0
・　cloud_firestore: ^2.3.0

まず正しく動くコードを載せておきます。

main.dart

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

Future<void> main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  String? data;

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('title'),
        ),
        body: StreamBuilder<QuerySnapshot>(
          stream: FirebaseFirestore.instance.collection('books').snapshots(),
          builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
            return ListView(
              children: snapshot.data!.docs.map((DocumentSnapshot document) {
                return ListTile(
                  title: Text(document.get('title')),
                );
              }).toList(),
            );
          },
        ),
      ),
    );
  }
}

変更点

・　Firebaseの初期化が必要らしい

Future<void> main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

・　これでnullを許可してあげる。

String? data;

・　FirestoreがFirebaseFirestoreに変更

FirebaseFirestore.instance.collection('books').snapshots()

・　documentsがdocsになったみたい
・　レシーバーが「null」になる可能性があるため、docsに無条件でアクセスするできない。そのためdata!とする必要がある。

snapshot.data!.docs.map((DocumentSnapshot document)

FlutterでFirestoreからデータを取得する（null-safety）

変更点

参考記事

Discussion