'space between items in gridview flutter

I have a gridview with 6 items (cards with images and text). I want those 6 items to fit me on the screen but the gridview leaves all the space I can between items by jumping 2 items off the screen.

I leave a picture of what I want and what I have.

Thank you.

return MaterialApp(
    home: Scaffold(
        body: Container(
  margin: EdgeInsets.only(top: 0),
  child: Stack(
    alignment: AlignmentDirectional.topCenter,
    children: <Widget>[
      Container(
        height: 200,
        color: Colors.black,
      ),
      Container(
        margin: EdgeInsets.only(top: 200),
        decoration: BoxDecoration(
            image: new DecorationImage(
                image: AssetImage("assets/fondo.png"), fit: BoxFit.fill)),
      ),
      Image.asset("assets/cara_simio_banner.png"),
      Padding(
        padding: EdgeInsets.only(top: 220),
        child: Text(
          "{CodeJaVu}",
          style: TextStyle(
              color: Colors.white,
              fontSize: 25,
              fontWeight: FontWeight.bold),
        ),
      ),
      Container(
        margin: EdgeInsets.only(top: 230),
        child: GridView.count(
          crossAxisCount: 2,
          children: items.map((item) {
            return GestureDetector(
              onTap: () {},
              child: CardItem(item),
            );
          }).toList(),
        ),
      )
    ],
  ),
)));

}

Widget CardItem(Item item) {
return Card(
  margin: EdgeInsets.all(40),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15.0),
  ),

    child: 
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Image.asset(
            item.image,
            width: 50,
            height: 50,
          ),
          Text(item.name)
        ],
      )
);
}

class Item {
 String _name;
 String _image;

 Item(this._name, this._image);
 String get name => _name;
 set name(String name) => _name = name;

 String get image => _image;
 set image(String image) => _image = image;
}

what I have,

what I have

what I want,

what I want

Solution 1:^[1]

add childAspectRatio parametr to GridView.cout counstructor, and change Card margin.

I've used:

..
GridView.count(
              childAspectRatio: 3/2,

..
Card(
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      ..

Solution 2:^[2]

You can also use mainAxisSpacing and crossAxisSpacing like below.

return GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2, crossAxisSpacing: 8, mainAxisSpacing: 4),
  padding: EdgeInsets.all(8),
  shrinkWrap: true,
  itemCount: widgetList.length,
  itemBuilder: (context, index) {
    return widgetList[index];
  },
);

Solution 3:^[3]

children:

space.photos.map((item) {
  return Container(
    margin: EdgeInsets.only(
      left: 24,
    ),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(16),
      child: Image.network(
        item,
        width: 110,
        height: 88,
        fit: BoxFit.cover,
      ),
    ),
  );
}).toList()

Solution 4:^[4]

Just add these 2 lines in your GridView widgets:

mainAxisSpacing: 20,
crossAxisSpacing: 20,

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kherel
Solution 2	Jay Dangar
Solution 3	General Grievance
Solution 4	Félix Ch

'space between items in gridview flutter

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]