Flutter Position Grid Elements - flutter

Question

I need to push or rather position some elements inside my Widget, the main idea is to place them at the bottom of the view
The idea is to position the elements of the blue box in the other blue box
class Principal extends StatelessWidget {
#override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
final List<String> _listItem = [
'assets/foto.jpg',
'assets/foto2.jpg',
'assets/foto3.png',
'assets/foto4.jpg',
];
return Stack(
children: <Widget>[
Scaffold(
body: SafeArea(
child: Stack(
children: <Widget>[
_containerImg(context,screenWidth,screenHeight),
_table(_listItem),
],
),
),
),
],
);
}
Widget _containerImg(BuildContext context,ScreenWidth,ScreenHeight){
return Container(
height: ScreenHeight,
width: ScreenWidth,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/480359.jpg'),
fit: BoxFit.cover,
),
),
);
}
Widget _table(List<String> _listItem){
return GridView.count(crossAxisCount: 4,
padding: EdgeInsets.all(5.0),
crossAxisSpacing: 1.0,
mainAxisSpacing: 1.0,
children: _listItem.map((item) => Card(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: AssetImage(item),
fit: BoxFit.cover,
),
),
),
),
).toList()
);
}
}
I leave samples of the code, I tried to place a SizedBox, and an expanded one in the middle of the Widget, but it didn't work

Answer 1

class Principal extends StatelessWidget {
#override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
final List<String> _listItem = [
'https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
'https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
];
return Scaffold(
body: SafeArea(
child: _containerImg(context, screenWidth, screenHeight, _listItem),
),
);
}
Widget _containerImg(
BuildContext context, ScreenWidth, ScreenHeight, List<String> listItem) {
return Container(
height: ScreenHeight,
width: ScreenWidth,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://aegis-be.com.sg/wp-content/themes/aegis_theme/images/banner_2.jpg"),
fit: BoxFit.cover,
),
),
alignment: Alignment.bottomCenter,
child: _table(listItem),
);
}
Widget _table(List<String> _listItem) {
return Wrap(
verticalDirection: VerticalDirection.up,
children: _listItem
.map(
(item) => Card(
child: Container(
height: 80,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: NetworkImage(item),
fit: BoxFit.cover,
),
),
),
),
)
.toList());
}
}