How to hide specific child inside Stack widget in 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

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

Answer 2

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

1. 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

2. 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