CODEWITHSUNDEEP
androidiosfirebasefluttergoogle-cloud-firestore
Shaurya Kohli
Shaurya Kohli

Reputation: 65

How to Display data being read from Firestore

void _myMatches() {
if (SignUp.userUid != null) {
  FirebaseFirestore.instance
      .collection("posts")
      .where(
        'owner id',
        isEqualTo: SignUp.userUid,
      )
      .where("User Id", isNotEqualTo: [])
      .where("rental status", isEqualTo: false)
      .get()
      .then((value) {
        value.docs.forEach((result) {
          print(result.data());
        });
      });
} else {
  FirebaseFirestore.instance
      .collection("posts")
      .where(
        'owner id',
        isEqualTo: Loginpage.userUid,
      )
      .where("User Id", isNotEqualTo: [])
      .where("rental status", isEqualTo: false)
      .get()
      .then((value) {
        value.docs.forEach((result) {
          print(result.data());
        });
      });
    }
  }
}

Hi, I am using flutter and firestore to write a program. My function that reads the data is as follows:(mentioned above)

which i call when a specific button is pressed. This leads to the data being read from firestore to be printed on the console. What do I do to display it on my emulator. How do I wrap this data in a widget so I can display it on the screen on whichever page i want?

Upvotes: 0

Views: 135

Answers (1)

Joshua Lin
Joshua Lin

Reputation: 86

The key is to use a FutureBuilder to render UI after you get the data, and show loading before that. Then inside builder of FutureBuilder, use ListView and ListTile(or anything you like) to render list items.

A minimum example might looks like this:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MaterialApp(
    home: App(),
  ));
}

class App extends StatelessWidget {

  Future<QuerySnapshot<Map<String, dynamic>>> getData() {
    // Handle any data retrieval logic you want
    return FirebaseFirestore.instance.collection('posts').get();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<QuerySnapshot<Map<String, dynamic>>>(
        // plug your future snapshot here
        future: getData(),
        builder: (context, snapshot) {
          // Check loading
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          }

          // Check error
          final queryData = snapshot.data;
          if (snapshot.hasError || queryData == null) {
            return Icon(Icons.error);
          }

          return Scaffold(
            // Use ListView.builder to render only visible items
            body: ListView.builder(
              itemCount: queryData.docs.length,
              itemBuilder: (context, index) {
                // Get data inside docs
                final docData = queryData.docs[index].data();
                return ListTile(
                  title: docData['title'],
                  subtitle: docData['subtitle'],
                );
              },
            ),
          );
        });
  }
}

Upvotes: 1

Related Questions