5

I want to remove the spaces between gridview children. I will provide an image of what I need and what below respectively. I used the GridView() by the way.

 GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, ),
            children: <Widget>[
                ...sections
            ],
          ),

sections is a list of widgets.

what I want

What I am getting

apologise, I am unable to show images my questions yet.

2
  • Try this way GridView.count( crossAxisCount: 3, children: List.generate(100, (index) { return Container( color: index%2==0?Colors.green:Colors.orange, child: Center( child: Text( 'Item $index', style: Theme.of(context).textTheme.headline, ), ), ) ; }), ), )); Commented Apr 25, 2020 at 9:53
  • 1
    may be the child widgets has margins set!! Commented Apr 25, 2020 at 11:17

3 Answers 3

13

I used GridView.count a lot within my apps. You can just remove the bottom padding of a GridView using padding: EdgeInsets.zero.

Sign up to request clarification or add additional context in comments.

Comments

5
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 200.0,
    mainAxisSpacing: 10.0,
    crossAxisSpacing: 10.0,
    childAspectRatio: 4.0,
  ),

Try with altering the values. I think this will help you.

1 Comment

Actually, if the items in the grid are not square, the childAspectRatio solves the problem. Copilot didn't suggest this solution, so StackOverflow still rules! Thanks.
4

Your children probably have margin.

See this.

       GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 1,
            crossAxisSpacing: 1,
          ),
          children: List.generate(
            20,
            (index) => Container(
              color: Colors.white,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.touch_app, size: 30, color: Colors.yellow[900],),
                  SizedBox(height: 10,),
                  Text("Touch", style: TextStyle(fontSize: 20),)
                ],
              ),
            ),
          ),
        ),

The output:

enter image description here

1 Comment

Gracias, it actually did. I had padding on the widget that was generated.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.