如何使用 Firebase 实时数据库和 FutureBuilder 更改 Flutter 小部件可见性？

Question

Well, My realtime database looks like: Database

My app looks like: Slidable button

The slidable button is wrapped in Visibility() widget, so, I'm trying to set this one invisible when child "inService" sets in "true" vice versa. I'd really thank if anyone could tell me how to implement with FutureBuilder because I'm just trying once after Widget build, like this:

bool inService = false;

Widget build(BuildContext context) {
userRef.child(FirebaseAuth.instance.currentUser.uid).onValue.listen((event) {
  var snap = event.snapshot;
  inService = snap.value["inService"];
  //inService = (snap.value["inService"] == true) ? false: true;
  print(" info: $inService");
});
.....// design

 Visibility(
        visible: (inService) ? false : true,
        child: Positioned(
          bottom: 36,
          left: 20,
          right: 20,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(35.0),
              boxShadow: [
                BoxShadow(
                  color: Colors.black,
                  blurRadius: 6.0,
                  spreadRadius: 0.5,
                  offset: Offset(0.7,0.7),
                )
              ],
            ),//BoxDecoration
            child:SliderButton(
              action: () {
                ///Do something here OnSlide
              },

              ///Put label over here
              label: Text(
                "Desliza para entrar en servicio",
                style: TextStyle(
                    color: Color(0xffcbc7c7),
                    fontWeight: FontWeight.w500,
                    fontSize: 17),
              ),
              icon: Center(
                child: Icon(
                  Icons.directions_car_sharp,
                  color: Colors.black54,
                  size: 35.0,
                )
              ),//Center
              ///Change All the color and size from here.
              buttonColor: Colors.grey[200],
              highlightedColor: Colors.white,
              baseColor: Colors.grey,
              dismissible: false,
              width: 335,
            ),// SliderButton
          ),
        ),
      ),

I'm sure with FutureBuilder it will work as I want, I mean, when inService change, the SlidableButton change too.

Answer 1

Unfortunately, you won't be able to implement that with FutureBuilder , Because Once the data changes in your database there's no way FutureBuilder knows about it so it doesn't get rebuilt. The Futurebuilder calls the future attached with it only when the build method is called(Or when parent rebuilds). I would recommend using a StreamBuilder Widget , A Widget that builds itself based on the latest snapshot of interaction with a Stream.

StreamBuilder(
  stream:userRef.child(FirebaseAuth.instance.currentUser.uid).onValue,
  builder:(context,snap){
    if(snap.hasData){
     Map data = snap.data.snapshot.value;
   final inService = data["inService"];
       return Visibility(
       visible: (inService) ? false : true,
       child: Positioned(
                bottom: 36,
              ...
              )
       );
    }
  }
);