If you want to display your items as a grid with Images. In this post we will use image and text to look at all of the common use cases. Consider this post reference.

Convert the data source into widgets

Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                  'https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-320-80.jpg',
                    fit: BoxFit.cover,
                    height: 80.0,
                    width: double.infinity,
                    alignment: Alignment.center,
                  ),
                  Text('Lion',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GridView-Custom';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: GridView.count(
          primary: false,
          padding: const EdgeInsets.all(20),
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          crossAxisCount: 3,
          children: <Widget>[
            Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                    'https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-320-80.jpg',
                    fit: BoxFit.cover,
                    height: 80.0,
                    width: double.infinity,
                    alignment: Alignment.center,
                  ),
                  Text('Lion',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                    'https://c402277.ssl.cf1.rackcdn.com/photos/18134/images/hero_small/Medium_WW226365.jpg?1574452099',
                    fit: BoxFit.cover,
                    height: 80.0,
                    width: double.infinity,
                    alignment: Alignment.center,
                  ),
                  Text('Tiger',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                    'https://www.audubon.org/sites/default/files/gettyimages_142457895.jpg',
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: 80.0,
                  ),
                  Text('Elephant',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                    'https://upload.wikimedia.org/wikipedia/commons/a/a9/Macaca_sinica_-_01.jpg',
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: 80.0,
                    alignment: Alignment.center,
                  ),
                  Text('Monkey',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                    'https://cdn.mos.cms.futurecdn.net/HjFE8NKWuCmgfHCcndJ3rK-320-80.jpg',
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: 80.0,
                    alignment: Alignment.center,
                  ),
                  Text('Zebra',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                    'https://cdn.mos.cms.futurecdn.net/vJvY6J485ReQFXAgx5DSJ3-320-80.jpg',
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: 80.0,
                    alignment: Alignment.center,
                  ),
                  Text('Giraffe',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                    'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Cheetah_portrait_Whipsnade_Zoo.jpg/1135px-Cheetah_portrait_Whipsnade_Zoo.jpg',
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: 80.0,
                    alignment: Alignment.center,
                  ),
                  Text('Cheetah',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                    'https://images.unsplash.com/photo-1528238344097-a8994f7c74e4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80',
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: 80.0,
                    alignment: Alignment.center,
                  ),
                  Text('Leopard',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                    'https://media.arkansasonline.com/img/photos/2019/06/17/resized_250499-1b-deer-0618_85-26607_t800.JPG?90232451fbcadccc64a17de7521d859a8f88077d',
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: 80.0,
                    alignment: Alignment.center,
                  ),
                  Text('Deer',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                    'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRCTXXrGQK6J31BfESB8Ls2mnBey6Lmg9nKEJ0eXW9lHkK_FnoJ',
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: 80.0,
                    alignment: Alignment.center,
                  ),
                  Text('Wolf',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                    'https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/GSFFUVUCF4Y2DJXGCQCTJKN42E.jpg&w=767',
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: 80.0,
                    alignment: Alignment.center,
                  ),
                  Text('Bear',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(0),
              color: Colors.grey[500],
              child: Column(
                children: <Widget>[
                  new Image.network(
                    'https://img.traveltriangle.com/blog/wp-content/uploads/2018/09/sitzerland-wildlife-cover.jpg',
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: 80.0,
                    alignment: Alignment.center,
                  ),
                  Text('Fox',style: TextStyle(color: Colors.white),),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

You can Download Source Code via Github.