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.
Hi there, yes this paragraph is really good and I have learned lot of things from it regarding blogging.
thanks.
terrific as well as amazing blog site. I really intend to thank you, for providing
us better details.
Great, thanks for sharing this blog post.Much thanks again.