How to hide specific child inside Stack widget in flutter - flutter

Question

How can i hide specific child inside Stack widget. I tried Visibility widget to hide child but this effects whole stack widget to hidden.
My code
Visibility(
visible: visibleControl == ScreenControls.RECORDING ? true:false,
child: Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
Visibility(
visible: false,
child: SpinKitRipple(
color: kConvertLoadingDotsColor,
size: 100,
),
),
Positioned(
bottom:6,
child:Text("Hello Mongolia"),),
],
)

Answer 1

UPDATE:
There is a param in Visibility called maintainSize that will keep the size of the widget and therefore the Stack size too
OLD:
Visibility doesn't hide the widget, it replaces it with a zero-sized box. So if the `Stack size is inherited from their child and the only child that give it size has visibility false the stack will have 0 size.
There are several solutions to this
Use fit: StackFit.expand to expand Stack size to parent
1.1 Add a SizedBox above Stack with a fixed height if you want a fixed height
Replace Visibility widget with Opacity widget, this will hide the widget but won't be remove it. This to consider here is
opacity performance
For values of opacity other than 0.0 and 1.0, this class is relatively expensive because it requires painting the child into an intermediate buffer.
Touch inputs will still work. You can add an IgnorePointer with the param ignore that changes along the opacity one

Answer 2

This is just an example ! Modify as your requirement... !
List<bool> visibilityValues = [];
#override
void initState() {
super.initState();
visibilityValues = List.generate(5, (ind) => true).toList();
//change 5 with your num of widgets
}
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(15),
child: Stack(children: [
Positioned(
top: 1,
left: 1,
child: Visibility(
visible: visibilityValues[0],
child:
InkWell(
//similarly wrap all widgets with inkwell or any othe listener and change widget visibility value
onTap:(){
setState((){
visibilityValues[0] = false;
});
},
child: Container(width: 100, height: 100, color: Colors.greenAccent)),
),
),
Positioned(
top: 1,
right: 1,
child: Visibility(
visible: visibilityValues[1],
child:
Container(width: 100, height: 100, color: Colors.blueAccent),
),
),
Positioned(
bottom: 1,
left: 1,
child: Visibility(
visible: visibilityValues[2],
child:
Container(width: 100, height: 100, color: Colors.redAccent),
),
),
Positioned(
bottom: 1,
right: 1,
child: Visibility(
visible: visibilityValues[3],
child:
Container(width: 100, height: 100, color: Colors.yellowAccent),
),
),
Align(
alignment: Alignment.center,
child: Visibility(
visible: visibilityValues[4],
child:
Container(width: 100, height: 100, color: Colors.tealAccent),
),
)
]));
}