时间戳

首页 > 解决方案 > 如何使用 Firebase 实时数据库和 FutureBuilder 更改 Flutter 小部件的可见性？

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

问题描述

好吧，我的实时数据库看起来像：数据库

我的应用看起来像：滑动按钮

可滑动按钮包含在 Visibility() 小部件中，因此，当子“inService”设置为“true”时，我试图将其设置为不可见，反之亦然。如果有人能告诉我如何使用 FutureBuilder 实现，我真的很感谢，因为我只是在 Widget 构建后尝试一次，如下所示：

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
          ),
        ),
      ),

我确信使用 FutureBuilder 它将按我的意愿工作，我的意思是，当 inService 更改时，SlidableButton 也会更改。

标签： firebaseflutterfirebase-realtime-databasevisibilityflutter-futurebuilder

解决方案

不幸的是，您将无法使用FutureBuilder来实现它，因为一旦数据库中的数据发生更改，FutureBuilder 就无法知道它，因此它不会被重建。Futurebuilder 仅在调用 build 方法时（或在父重建时）调用附加的 future。我建议使用StreamBuilder Widget，一个基于与 Stream 交互的最新快照构建自身的 Widget。

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,
              ...
              )
       );
    }
  }
);

推荐阅读