Flutter: Grid View force element on bottom - flutter

Question

I am new to flutter and I am building my first app.
I use Staggered Grid View (https://pub.dev/packages/flutter_staggered_grid_view#-readme-tab-) which should behave like the normal Grid View.
My settings are: body: StaggeredGridView.count( crossAxisCount: 4 ...
which means, that I can arrange 4 elements next to each other. Everything is working fine.
But now I want to force one element in the next column and place it in the middle and not next to the other ones. How can I do that?
Thanks for help!
body: StaggeredGridView.count(
crossAxisCount: 4,
crossAxisSpacing: 12.0,
mainAxisSpacing: 12.0,
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
children: <Widget>[
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Row
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Material
(
child: Padding(
child: Icon(Icons.store, color: Colors.black54, size: 40.0),
padding: const EdgeInsets.only(right: 15.0),)
),
Column
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Text('Test', style: TextStyle(color: Colors.redAccent)),
Text('Test', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 20.0))
],
),
]
),
),
onTap: () => print('Not set yet'),
),
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Row
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Material
(
child: Padding(
child: Icon(Icons.store, color: Colors.black54, size: 40.0),
padding: const EdgeInsets.only(right: 15.0),)
),
Column
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Text('Test', style: TextStyle(color: Colors.redAccent)),
Text('Test', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 20.0))
],
),
]
),
),
onTap: () => print('Not set yet'),
),
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Row
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Material
(
child: Padding(
child: Icon(Icons.store, color: Colors.black54, size: 40.0),
padding: const EdgeInsets.only(right: 15.0),)
),
Column
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Text('test', style: TextStyle(color: Colors.redAccent)),
Text('test', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 20.0))
],
),
]
),
),
onTap: () => print('Not set yet'),
),
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Column
(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>
[
Material
(
color: Colors.teal,
shape: CircleBorder(),
child: Center
(
child: Icon(Icons.settings_applications, color: Colors.white, size: 30.0),
)
)
]
),
),
),
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Column
(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>
[
Material
(
color: Colors.teal,
shape: CircleBorder(),
child: Center
(
child: Icon(Icons.settings_applications, color: Colors.white, size: 30.0),
)
)
]
),
),
),
//THIS IS THE ELEMENT I WANT TO FORCE TO THE NEXT COLUMN AND CENTER
_buildTile(QrImage(data: "1234567890", version: QrVersions.auto, size: 200.0,),),
],
staggeredTiles: [
StaggeredTile.extent(4, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(4, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(4, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(1, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(1, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(1, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
],
),
);
}
Widget _buildTile(Widget child, {Function() onTap}) {
return Material(
elevation: 14.0,
borderRadius: BorderRadius.circular(12.0),
shadowColor: Color(0x802196F3),
child: InkWell
(
// Do onTap() if it isn't null, otherwise do print()
onTap: onTap != null ? () => onTap() : () { print('${MediaQuery.of(context).padding.top}'); },
child: child
)
);
}
}