如何更新数据存储在firebase firestore中的小部件的可见性

Question

我试图显示两个列表，它们的数据是使用流生成器从firebase firestore更新的。一个列表包含所有任务，而另一个列表则包含具有字段值"0"的任务；taskStatus"；真的。一切都很好，我想添加一个功能，当"；已完成任务"；列表中，通过更改可见性小部件中visible参数的状态，整个小部件区域应该变得不可见。以下是根据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],
),
);
},
),
),
),
],
),
);
}),
),

要进行更改，我必须重新加载应用程序。那么，我如何在不重新加载应用程序的情况下更改它以更新可见性呢。

两个列表的完整代码：

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

Answer 1

您不需要其他参数，请执行以下操作：

retutn snapshot.data!.isEmpty ? SizedBox(): Column(
children: [
...
],
)

或者如果你只想让它隐形，试试这个：

Opacity(
opacity: snapshot.data!.isEmpty ? 0 : 1,
child: Column(
children: [
...
],
),
),

Answer 2

当您想要在条件下隐藏或显示小部件时，不需要使用空的SizedBox()。与使用空SizedBox()相比，SizedBox()使用SizedBox.shrink()将占用尽可能小的空间，并且优化程度更高

return snapshot.data!.isEmpty ? SizedBox.shrink(): Column(
children: [
...
],
)