🙄

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

2021/09/30に公開約1,900字

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;

  
  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)

参考記事

https://matsumarudesu.com/flutterfirebasecloudfirestore-latest/

https://zenn.dev/captain_blue/articles/flutter-firestore-realtime-changes

https://zenn.dev/nagaho/articles/c9b84d7f99966d

https://gurutaka-log.com/flutter-firebase-firestore-sample#i-4

Discussion

ログインするとコメントできます