Flutter and Firebase: Show stored information from cloud_firestore in widget

Question

I want to show data from my firebase cloudfirestore as you see in the picture:

In a Settings page I want to show all the information from the logged-in user. Here is the Settings-Code ("einstellungen" in german):

class einstellungen extends StatelessWidget {
  final user = FirebaseAuth.instance.currentUser;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("Einstellungen"),
      ),
      backgroundColor: Colors.orange,
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
                margin: const EdgeInsets.only(
                    left: 8.0, right: 8.0, top: 10.0, bottom: 5.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.white.withOpacity(0.2),
                ),
                child: Column(
                  children: [
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Text('Benutzer:',
                            style: TextStyle(fontWeight: FontWeight.bold)),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.only(
                            bottom: 10.0, left: 10.0, right: 10.0),
                        child: Text(''),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Text('Spitzname:',
                            style: TextStyle(fontWeight: FontWeight.bold)),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.only(
                            bottom: 10.0, left: 10.0, right: 10.0),
                        child: Text(''),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Text('E-Mail:',
                            style: TextStyle(fontWeight: FontWeight.bold)),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.only(
                            bottom: 10.0, left: 10.0, right: 10.0),
                        child: Text(''), // here should print the email address from firestore
                      ),
                    ),
                    Text(''),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Text('Hinweis: ',
                            style: TextStyle(fontWeight: FontWeight.bold)),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Text(
                            'Wenn Du dein Konto löschen oder dein Passwort zurücksetzen möchtest, schreibe bitte eine Email an medien@visuhome.de'),
                      ),
                    ),
                    Text(''),
                  ],
                )),
            Container(
              margin: const EdgeInsets.only(
                  left: 8.0, right: 8.0, top: 3.0, bottom: 3.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.white.withOpacity(0.2),
              ),
              child: Row(
                children: [
                  ButtonNutzung(),
                  Text("Nutzungsbedingungen",
                      style:
                          TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Divider(),
            ),
            SizedBox(height: 10),
            if (user.uid != null)
              Text(
                'Cloud User-ID: ' + user.uid,
                style: TextStyle(color: Colors.black),
              ),
            SizedBox(height: 10),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Divider(),
            ),
            GestureDetector(
              onTap: _launchURL2,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: 20.0, right: 20.0),
                    child: Text(
                      'created by visuhome',
                      style: TextStyle(
                          fontWeight: FontWeight.w300,
                          fontSize: 12,
                          color: Colors.black),
                    ),
                  ),
                  Image(
                    //AssetImage oder SizedBox mit child und width
                    image: AssetImage('assets/visuhome_logo_black_flutter.png'),
                    fit: BoxFit.fitHeight,
                    height: 30,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 20.0, right: 20.0),
                    child: Text(
                      'Version 1.0',
                      style: TextStyle(
                          fontWeight: FontWeight.w300,
                          fontSize: 12,
                          color: Colors.black),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

As you can see I do get information from the FirebaseAuth.instance.currentUser , so the userid from the logged-in user is shown. But I want the information from the userdata in firestore too.

Can anybody help with this basic firestore-trick I guess? I'm new in flutter. Tried a lot but cannot find solutions which fit for my example. Thanks a lot

Answer 1

You should to create query to Firestore and get user details.

If you know the user ID, you can call doc function to create query.

 @override
  Widget build(BuildContext context) {
    CollectionReference users = FirebaseFirestore.instance.collection('users');

    return FutureBuilder<DocumentSnapshot>(
      future: users.doc(documentId).get(),
      builder:
          (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {

        if (snapshot.hasError) {
          return Text("Something went wrong");
        }

        if (snapshot.connectionState == ConnectionState.done) {
          Map<String, dynamic> data = snapshot.data.data();
          return Text("Full Name: ${data['full_name']} ${data['last_name']}");
        }

        return Text("loading");
      },
    );
  }

Or use where expression to find user by its attributes (for example email):

FirebaseFirestore.instance
  .collection('users')
  .where('email', isEqualTo: "test@yahoo.de")
  .get()

For more details check Firestore tutorial