I have a GridView.Builder with a crossAxisCount of six it works well when there 12 items but if the items are 11 or less or just uneven it doesn't look so well... 
this is what it looks now NOT SO NICE with just eleven items
This is what I would like it to look like when there is less items
the items that are less should fall on the center, this way when it is maybe just one item it should not show on the far left but it should just be on the center like this...
and here is my code
GridView.builder(
shrinkWrap: true,
physics: BouncingScrollPhysics(),
itemCount: staffs == null ? 0 : staffs.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1.0, crossAxisCount: 6),
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () {
showPinDialog(staffs[index]);
},
child: Container(
// padding: EdgeInsets.only(left: 40, right: 40),
margin:
EdgeInsets.only(right: 5, bottom: 5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
border: Border.all(
color:
Colors.white)),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset(
'assets/icons/black/user.png',
width: iconSize,
height: iconSize,
fit: BoxFit.contain
),
Center(
child: Text(
'${staffs[index]['name'][0].toUpperCase()}${staffs[index]['name'].substring(1)}',
// staffs[index]['name'],
style: TextStyle(
fontSize: staffNameFontSize,
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
),
],
),
)
);
},
)