How to show Flutter firebase realtime database on widgets with data updates using Stream builder?

Question

I am using Firebase for first time. My app is connected to firebase successfully and i am able access data on screen by following code. My problem is that while Values changes in database it should be changed on the screen without any button press or something.

stream:  FirebaseDatabase.instance.ref("app3-e0228-default-rtdb").onvalue,

while i use above line the data on the screen will not accessible. what should I do?

      StreamBuilder(
                stream:  FirebaseDatabase.instance.ref("app3-e0228-default-rtdb").once().asStream(),

                builder: (context,AsyncSnapshot<dynamic>  snapshot) {
                  if (snapshot.connectionState == ConnectionState.done) {
                     DatabaseEvent databaseEvent = snapshot.data!; // 👈 Get the DatabaseEvent from the AsyncSnapshot
                     var databaseSnapshot = databaseEvent.snapshot; // 👈 Get the DataSnapshot from the DatabaseEvent
                     print('Snapshot: ${databaseSnapshot.value}');
                    return Text("${databaseSnapshot.value}");
                  } else {
                    return CircularProgressIndicator();
                  }
                }),

DataBase

Solution 1

The first problem I spot is here:

stream: FirebaseDatabase.instance
    .ref("app3-e0228-default-rtdb")
    .once()
    .asStream(),

You're calling once(), which means you read the value from the database once (hence its name), and then turn that into a stream. So your stream will just have one element.

If you want to listen to the database and receive updates too, use onValue:

stream: FirebaseDatabase.instance
    .ref("app3-e0228-default-rtdb")
    .onValue

Inside your builder you'll then have a DataSnapshot that contains the data from your database, and you can simply do:

builder: (context, snapshot) {
  if (snapshot.connectionState == ConnectionState.done) {
    var databaseEvent = snapshot.data!; // 👈 Get the DatabaseEvent from the AsyncSnapshot
    var databaseSnapshot = databaseEvent.snapshot; // 👈 Get the DataSnapshot from the DatabaseEvent
    print('Snapshot: ${databaseSnapshot.value}');
    return LiveMatch();
  } else {
    return CircularProgressIndicator();
  }

Solution 2

Have you implemented streamSubscription and tried listening to it? StreamBuilder will automatically update data whenever there are changes made.

Comments

[Qasim Ali]

and stream is also not working ..like FirebaseDatabase.instance .ref("app3-e0228-default-rtdb") .onValue and if i use as above then values are shown but didn't updated.

[Qasim Ali]

How can i subscribe stream in above code?

[Ujjawal Maurya]

Check this out: medium.com/flutter-community/…

[Qasim Ali]

I read this artical before this, but i am unable to understand that how can use this with my firebase databaseevent? @Ujjawal Maurya

[Ujjawal Maurya]

You can find how to use StreamBuilder correctly easily anywhere.