I am unable to read and return data from Firebase database

Question

I am unable to connect my flutter app to Firestore database. This is just a simple app to test the connection but I get "no data" returned each time.

Here is my code, I done everything in Firestore and within Flutter with regards to adding a collection and document, adding the Json file to the app folder in flutter and added all plugins/dependencies to configure Flutter to work with Firebase.

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

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

class FirestoreApp extends StatefulWidget {
  const FirestoreApp({Key? key}) : super(key: key);

  @override
  _FirestoreAppState createState() => _FirestoreAppState();
}

class _FirestoreAppState extends State<FirestoreApp> {


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const TextField(),
        ),
        body: Center(
          child: StreamBuilder(
                stream: FirebaseFirestore.instance.collection("data").snapshots(),
                 builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                 if(!snapshot.hasData) {
                     return const Text("no data",
                      );
                      } else {
                   return ListView(
                     children: snapshot.data!.docs.map((grocery) {
                       return Center(
                         child: ListTile(
                           title: Text(grocery['name']),
                         ),
                       );
                     }).toList(),
                   );
                 }
              }),
             ),
                   floatingActionButton:
                   FloatingActionButton(
                     child: const Icon(Icons.save),
                     onPressed: () {},
          ),
      ),
    );
  }

Answer 1

If the configurations for firebase is okay in your flutter with firestore then I could rewrite your code as follows

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

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

class FirestoreApp extends StatefulWidget {
  const FirestoreApp({Key? key}) : super(key: key);

  @override
  _FirestoreAppState createState() => _FirestoreAppState();
}

class _FirestoreAppState extends State<FirestoreApp> {


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const TextField(),
        ),
        body: Center(
          child: StreamBuilder(
                stream: FirebaseFirestore.instance.collection("data").snapshots(),
                 builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                 if(!snapshot.hasData) {
                     return const Text("no data",
                      );
                      } else {
                   return ListView.builder(
          padding: EdgeInsets.all(10.0),
          itemBuilder: (context, index) => buildItem(context, snapshot.data.documents[index]),
          itemCount: snapshot.data.documents.length,
        );
                 }
              }),
             ),
                   floatingActionButton:
                   FloatingActionButton(
                     child: const Icon(Icons.save),
                     onPressed: () {},
          ),
      ),
    );
  }

Flutter recommends using ListViewBuilder when displaying list of data with unknown length for performance reasons, Feel free to check flutter documentation for more info.