如何使用 Firebase 实时数据库和 FutureBuilder 更改 Flutter 小部件可见性?
How to change Flutter widget Visibility using Firebase Realtime Database and FutureBuilder?
嗯,
我的实时数据库如下所示:Database
我的应用看起来像:Slidable button
可滑动按钮包含在 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 也会改变。
不幸的是,您将无法使用 FutureBuilder 实现它,因为一旦数据库中的数据发生变化,FutureBuilder 就无法知道它,因此它不会被重建。 Futurebuilder 仅在调用 build 方法时(或在父级重建时)调用附加的 future。
我建议使用 StreamBuilder 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,
...
)
);
}
}
);
嗯, 我的实时数据库如下所示:Database
我的应用看起来像:Slidable button
可滑动按钮包含在 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 也会改变。
不幸的是,您将无法使用 FutureBuilder 实现它,因为一旦数据库中的数据发生变化,FutureBuilder 就无法知道它,因此它不会被重建。 Futurebuilder 仅在调用 build 方法时(或在父级重建时)调用附加的 future。 我建议使用 StreamBuilder 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,
...
)
);
}
}
);