如何更新数据存储在 firebase firestore 中的小部件的可见性？
[英]How to update the visibility of widgets whose data is stored in firebase firestore?
问题描述
I'm trying to show two lists whose data is updated from firebase firestore using stream builder.
我试图显示两个列表，其数据是使用 stream 构建器从 firebase 火库更新的。 One list contains all the tasks and another list contains tasks with a field value "taskStatus" of true.一个列表包含所有任务，另一个列表包含字段值为“taskStatus”的任务。 Everything works fine, I wanted to add the functionality that when there's no data in the "completedTasks" list, the whole widget area should just become invisible by changing the state of the visible parameter in the visibility widget.一切正常，我想添加这样的功能：当“已完成任务”列表中没有数据时，通过更改可见性小部件中可见参数的 state，整个小部件区域应该变得不可见。 Here's the code for changing the visibility based on snapshot data from firebase:下面是根据 firebase 的快照数据更改可见性的代码：
Expanded(
child: StreamBuilder<List<Task>>(
stream: DatabaseService().getCompletedTasks(orderName),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Loading();
}
List<Task>? completedTasks = snapshot.data;
return Opacity(
opacity: snapshot.data!.isEmpty ? 0 : 1,
child: Column(
children: [
Container(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30, vertical: 20),
child: Text(
"Completed Tasks",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.grey[700],
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: ListView.separated(
separatorBuilder: (context, index) =>
const SizedBox(
height: 5,
),
itemCount: completedTasks!.length,
itemBuilder: (context, index) {
return Dismissible(
background: Container(
color: Colors.red,
child: const Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
secondaryBackground: Container(
color: Colors.red,
child: const Align(
alignment: Alignment.centerRight,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
key: UniqueKey(),
onDismissed: (direction) {
DatabaseService()
.deleteTask(completedTasks[index].id);
AwesomeNotifications().cancelSchedule(
completedTasks[index].id);
},
child: Item(
task: completedTasks[index],
),
);
},
),
),
),
],
),
);
}),
),
To make changes, I've to hot reload the app.要进行更改，我必须热重载应用程序。 So, how can I change it to update the visibility without hot reloading the app.那么，如何在不热重新加载应用程序的情况下更改它以更新可见性。
Complete Code for both lists:两个列表的完整代码：
body: Column(
children: [
Expanded(
child: StreamBuilder<List<Task>>(
stream: DatabaseService().getTasks(orderName),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Loading();
}
List<Task>? tasks = snapshot.data;
if (snapshot.data!.isEmpty) {
return StreamBuilder(
stream: DatabaseService().getUniqueIDs(),
builder: (context, snapshot) =>
Column(
children: [
Container(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30, vertical: 40),
child: Text(
"Tasks",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.grey[700],
),
),
),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 30),
child: Container(
alignment: Alignment.center,
child: const Text(
"Great! You don't have any remaining tasks.",
style: TextStyle(
fontSize: 20,
fontFamily: "Roboto",
color: Colors.black,
),
),
),
),
const SizedBox(
height: 40,
),
Image(
image:
const AssetImage('assets/images/tasks.png'),
height: MediaQuery
.of(context)
.size
.height * 0.3,
),
],
),
);
}
return Column(
children: [
Container(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30, vertical: 40),
child: Text(
"Tasks",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.grey[700],
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: ListView.separated(
separatorBuilder: (context, index) =>
const SizedBox(
height: 5,
),
itemCount: tasks!.length,
itemBuilder: (context, index) {
return Dismissible(
background: Container(
color: Colors.red,
child: const Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
secondaryBackground: Container(
color: Colors.red,
child: const Align(
alignment: Alignment.centerRight,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
key: UniqueKey(),
onDismissed: (direction) {
DatabaseService()
.deleteTask(tasks[index].id);
AwesomeNotifications()
.cancelSchedule(tasks[index].id);
},
child: Item(
task: tasks[index],
),
);
},
),
),
),
],
);
}),
),
Expanded(
child: StreamBuilder<List<Task>>(
stream: DatabaseService().getCompletedTasks(orderName),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Loading();
}
List<Task>? completedTasks = snapshot.data;
return snapshot.data!.isEmpty ? SizedBox.shrink() : Column(
children: [
Container(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30, vertical: 20),
child: Text(
"Completed Tasks",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.grey[700],
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: ListView.separated(
separatorBuilder: (context, index) =>
const SizedBox(
height: 5,
),
itemCount: completedTasks!.length,
itemBuilder: (context, index) {
return Dismissible(
background: Container(
color: Colors.red,
child: const Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
secondaryBackground: Container(
color: Colors.red,
child: const Align(
alignment: Alignment.centerRight,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
key: UniqueKey(),
onDismissed: (direction) {
DatabaseService()
.deleteTask(completedTasks[index].id);
AwesomeNotifications().cancelSchedule(
completedTasks[index].id);
},
child: Item(
task: completedTasks[index],
),
);
},
),
),
),
],);
}),
),
],
),
2 个解决方案
解决方案1
1 2022-09-10 06:41:11
You don't need another parameter for that, do this:你不需要另一个参数，这样做：
retutn snapshot.data!.isEmpty ? SizedBox(): Column(
children: [
...
],
)
or If you want just make it invisible, try this:或者如果你只想让它不可见，试试这个：
Opacity(
opacity: snapshot.data!.isEmpty ? 0 : 1,
child: Column(
children: [
...
],
),
),
解决方案2
0 2022-09-10 07:45:55
No need to use empty SizedBox() when you want to hide or show a widget on a condition.当您想在某个条件下隐藏或显示小部件时，无需使用空SizedBox() 。 Instead of SizedBox() use SizedBox.shrink() , it'll taking as min space as possible and more optimized than using empty SizedBox()代替SizedBox()使用SizedBox.shrink() ，它会占用尽可能小的空间并且比使用空SizedBox()更优化
return snapshot.data!.isEmpty ? SizedBox.shrink(): Column(
children: [
...
],
)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何更新 flutter 中 firebase 火库中的所有集合 - How to update all collection in firebase firestore in flutter
如何检索 firebase firestore Android 上的数据？ - How to retrieve data on firebase firestore Android?
如何在 firebase firestore 中使用 isEqualTo 和 isNotEqualTo 查询数据 - How to query data with isEqualTo and isNotEqualTo in firebase firestore
如何在 firestore objective-c 上设置/更新数据时以秒为单位获取 Firebase 服务器时间？ - How to get Firebase server time in seconds while set/update data on firestore objective-c?
更新 firebase Firestore 中的数据 - updating data in firebase Firestore
Firebase firestore：如何查询相关文档，然后更新每个文档 - Firebase firestore: how to query relevant documents and then update each of them
如何有条件地更新 Cloud Firestore 中的数据？ - How to conditionally update data in Cloud Firestore?
如何更新存储在 firestore 中的发布者信息，并使用 flutter 应用程序 - How to update the Information of publisher stored in firestore, and using a flutter app
查询 Firebase Firestore 数据 - Querying Firebase Firestore Data
如何从 firebase firestore 获取数据并将数据存储在 useState 钩子中 - How to fetch data from firebase firestore and store the data in useState hook
相关标签