Flutter Gridview.count - How to remove blank space when a Container is Hidden?

user_7425940 0
Viewed 1777

I just want to ask how can you remove the blank space when a Container is hidden?

As you can see my code below , I tried to put it in Visibility and empty Container , but it still taking up spaces from the GridView.count.

Code:

  GridView.count(
        primary: false,
        padding: const EdgeInsets.all(20),
        crossAxisSpacing: 0,
        mainAxisSpacing: 0,
        crossAxisCount: 2,
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        children: <Widget>[

         GestureDetector(
              onTap: () => businessTypeClicked(1),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(
                      color: pressed[1]
                          ? Colors.green
                          : Colors.transparent, // set border color
                      width: 3.0), // set border width
                ),
                padding: const EdgeInsets.all(15),
                child: new Column(children: <Widget>[
                  Image.asset(
                    "assets/car.png",
                    height: 100,
                    width: 100,
                  ),
                  Text('Automotive/Transportation',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Constants.colorPrimary))
                ]),
              )),

          Visibility(
            visible: false,
            child: Container(
              color: Colors.white,
            ),
          ),

          Visibility(
            visible: false,
            child: Container(
              color: Colors.white,
            ),
          ),
       ]),

Image:

UI

flutter-animation flutter-layout flutter
2 Answers

Use a conditional statement if on Container, it will allow you to hide/show widget wile rendering.

 GridView.count(
        primary: false,
        padding: const EdgeInsets.all(20),
        crossAxisSpacing: 0,
        mainAxisSpacing: 0,
        crossAxisCount: 2,
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        children: [
          Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
          Container(
            height: 100,
            width: 100,
            color: Colors.green,
          ),
          if (false) // TODO: Condition
            Container(
              color: Colors.white,
            ),
          if (false) // TODO: Condition
            Container(
              color: Colors.white,
            ),
          Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
          Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
        ],
      ),
user_51065740

To hide the widget, try the Offstage widget

if attribute offstage:true //this will not occupy any physical space and will be invisible

if attribute offstage:false //this will occupy the physical space and visible

Offstage(
   offstage: true,
   child: Text("Visible"),
),
user_58570990
Related