How to see changes in flutter app when changing values in Firebase Realtime Database?

Question

I am trying to make these rolling switches to change its value whenever I do any change in Firebase realtime database.

To be more specific, whenever I change the value of Relay1/Data to 0, I want that switch to become inactive.

I've tried and looked everywhere, but I couldn't find any solution.

  bool relay1pressed;
  final databaseReferenceTest = FirebaseDatabase.instance.reference();



@override
  void initState() {
    super.initState();

    databaseReferenceTest
        .child('MedicalCenter')
        .once()
        .then((DataSnapshot snapshot) {
      String value = snapshot.value['Relay1']['Data'];
      print('Value is $value');
      if (value == '1') {
        relay1pressed = true;
      } else
        relay1pressed = false;

      setState(() {
        isLoading = true;
      });
    });
  }

  
//Widget build

            StreamBuilder(
              stream: databaseReferenceTest
                  .child('MedicalCenter')
                  .child('Relay1')
                  .onValue,
              builder: (BuildContext context, AsyncSnapshot<Event> snapshot) {
                databaseReferenceTest
                    .child('MedicalCenter')
                    .once()
                    .then((DataSnapshot snapshot) {
                  String value = snapshot.value['Relay1']['Data'];
                  print('Value is $value');
                  if (value == '1') {
                    relay1pressed = true;
                    print('relay1 bool $relay2pressed');
                  } else {
                    relay1pressed = false;
                    print('relay1 bool $relay2pressed');
                  }
                });

                return LiteRollingSwitch(
                  value: relay1pressed,
                  textOn: 'active',
                  textOff: 'inactive',
                  colorOn: Colors.deepOrange,
                  colorOff: Colors.blueGrey,
                  iconOn: Icons.lightbulb_outline,
                  iconOff: Icons.power_settings_new,
                  onChanged: (bool state) {
                    state
                        ? databaseReferenceTest
                            .child('MedicalCenter')
                            .update({'Relay1/Data': '1'})
                        : databaseReferenceTest
                            .child('MedicalCenter')
                            .update({'Relay1/Data': '0'});
           

Solution 1

You're currently using once() to get the value from the database, which means it only reads the current value. If you want to keep monitoring the value, you'll want to use onValue instead.

databaseReferenceTest
    .child('MedicalCenter')
    .onValue.listen((event) {
      var snapshot = event.snapshot

      String value = snapshot.value['Relay1']['Data'];
      print('Value is $value');

      ...

    });

Solution 2

databaseReferenceTest
.child('MedicalCenter')
.onValue.listen((event) {
  var snapshot = event.snapshot;
  setState(() {
    String value = snapshot.value['Relay1']['Data'];
  print('Value is $value');
  });
});

this should work... I just added setState,

Comments

[Ahmed A. Karasneh]

Thank you so much Puf for your reply ! :) it did work but sometimes i have to keep changing the values until it works again , i believe i have to add async or await somewhere? Im sorry i just started learning flutter and im still figuring things out :D

[Ahmed A. Karasneh]

I really appreciate your answers as they helped me a lot ! :D Thanks!

[Zim84]

Can you tell us why it works? What is setState doing that was missing before?

[Muhadmmad shobirin]

setState for refresh the layout, so if Text that takes value from >String value = snapshot.value [' Relay1 '] [' Data '];< will change too