Flutter Position Grid Elements

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());
  }
}