How to hide a single item from a stream builder - firebase

Question

Hi I have a stream builder that lists containers with a button to count down and when the counter hits zero I wanted to hide that single container from the list I can’t figure out how to, if anyone does please help
bool visibility = true;
Widget _dataList() {
if (data != null) {
return StreamBuilder(
stream: data,
builder: (context, snapshot) {
return ListView.builder(
itemCount: snapshot.data.documents.length,
padding: EdgeInsets.all(5.0),
itemBuilder: (context, i) {
return visibility == true
? new Container(
child: Padding(
padding: EdgeInsets.only(top: 5, right: 5, left: 5),
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 9,
color:
Theme.of(context).cardColor.withOpacity(.95),
shadowColor:
Theme.of(context).accentColor.withOpacity(.5),
child: Container(
padding: EdgeInsets.only(
bottom: 10, right: 10, left: 10, top: 15),
height: 210,
decoration: BoxDecoration(
color: Color(0xFF0B0F1B),
borderRadius: BorderRadius.circular(20),
border: Border.all(
width: 1,
color: Colors.grey.withOpacity(0.5))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(4.0),
child: Text(
'Number Of Participants :-' +
snapshot.data.documents[i]
.data['numberOfParticipants'],
style: TextStyle(
color: Colors.white, fontSize: 15),
),
),
Padding(
padding: const EdgeInsets.only(top: 7.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 40,
),
Material(
borderRadius:
BorderRadius.circular(20),
elevation: 26,
color: Color(0xFF0B0F1B),
child: Container(
height: 30,
width: 120,
decoration: BoxDecoration(
color: Color(0xFF0B0F1B),
borderRadius:
BorderRadius.circular(20),
border: Border.all(
width: 1,
color: Colors.grey
.withOpacity(0.5))),
child: InkWell(
splashColor: Colors.redAccent,
borderRadius:
BorderRadius.circular(20),
child: Center(
child: Text(
'View',
style: TextStyle(
color: Color(0xFFC77AF3),
fontSize: 18),
)),
onTap: () {
int currentval = int.parse(
snapshot.data.documents[i]
.data[
'numberOfParticipants']);
setState(
() {
currentval--;
snapshot.data.documents[i]
.data[
'numberOfParticipants'] =
currentval.toString();
if (currentval == 0) {
visibility = false;
}
},
);
},
),
),
),
SizedBox(
width: 85,
),
Material(
borderRadius:
BorderRadius.circular(20),
elevation: 26,
color: Color(0xFF0B0F1B),
child: Container(
height: 30,
width: 120,
decoration: BoxDecoration(
color: Color(0xFF0B0F1B),
borderRadius:
BorderRadius.circular(20),
border: Border.all(
width: 1,
color: Colors.grey
.withOpacity(0.5))),
child: InkWell(
splashColor: Colors.greenAccent,
borderRadius:
BorderRadius.circular(20),
child: Center(
child: Text(
'Join',
style: TextStyle(
color: Colors.greenAccent,
fontSize: 18),
)),
onTap: () {
setState(
() {},
);
},
),
),
),
],
),
),
],
),
),
),
),
)
: new Container();
},
);
});
} else {
return Center(child: Text('Nothing yet'));
}
}
this is my code i tried to accomplish the visibility by an empty container because i don't want it to hold a place but the problem is it hides all other containers with it the whole list goes invisible

Answer 1

You can use Opacity with an opacity: of 0.0 to draw make an element hidden but still occupy space.
To make it not occupy space, replace it with an empty Container().
EDIT: To wrap it in an Opacity object, do the following:
new Opacity(opacity: 0.0, child: new Padding(
padding: const EdgeInsets.only(
left: 16.0,
),
child: new Icon(pencil, color: CupertinoColors.activeBlue),
))
Google Developers quick tutorial on Opacity: https://youtu.be/9hltevOHQBw
you can also try
Visibility(
visible: false,
child: child
)
);