Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to read user's data in cloud firestore in 2024

Am using below method to get user’s data, how to display it on my screen? Pls guide as am not very fluent at flutter and firebase technologies yet and still learning. I have dug deeper into this still couldn’t make sense how to display the data now.

DatabaseReference ref = FirebaseDatabase.instance.ref();

  Future readUserData() async {
    final ref = FirebaseDatabase.instance.ref();
    final snapshot = await ref.child('users/username').get();
    if (snapshot.exists) {
      print(snapshot.value);
    } else {
      print('No data available.');
    }
  }
Tags:

2

Answers


  1. 0

    To display data fetched from Firebase on your Flutter screen, you can use the FutureBuilder or StreamBuilder widget

    1. FutureBuilder

      To display the data on screen, use the FutureBuilder widget. The FutureBuilder widget comes with Flutter and makes it easy to work with asynchronous data sources.

    2. StreamBuilder

      StreamBuilder is a widget that uses stream operations and basically, it rebuilds its UI when it gets the new values that are passed via Stream it listens to.

      You can see the below examples to retrieve data from the firebase real-time database by using the FutureBuilder StreamBuilder Widget

      How do I show user data from Firebase in my Flutter app?

      FutureBuilder and StreamBuilder in Flutter

    Login or Signup to reply.
  2. 0

    The code in your question uses the API for the Realtime Database, while you claim to have data in Firestore. While both databases are part of Firebase, they are completely separate and the API for one cannot be used to access data in the other.

    For a complete, working example of how to show data from Firestore in your Flutter app, check the documentation here: https://firebase.google.com/docs/cpp/setup?platform=android#libraries-desktop. From there:

    class UserInformation extends StatefulWidget {
  @override
  _UserInformationState createState() => _UserInformationState();
}

class _UserInformationState extends State<UserInformation> {
  final Stream<QuerySnapshot> _usersStream =
      FirebaseFirestore.instance.collection('users').snapshots();

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: _usersStream,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return const Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Text("Loading");
        }

        return ListView(
          children: snapshot.data!.docs
              .map((DocumentSnapshot document) {
                Map<String, dynamic> data =
                    document.data()! as Map<String, dynamic>;
                return ListTile(
                  title: Text(data['full_name']),
                  subtitle: Text(data['company']),
                );
              })
              .toList()
              .cast(),
        );
      },
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search