Flutter Grid View Example
This article, I'm going to explain how to work with flutter grid view by example. To display Images on Grid view we have multiple ways
- GridView.count()
- GridView.builder()
- GridView.custom()
- GridView.extend()
Refer: https://api.flutter.dev/flutter/widgets/GridView-class.html
Displaying Images using GridView.count()
In case, If you want to display images in statically or fixed size, we can use GridView.count Widget
GridView.count(
crossAxisCount: 3,
crossAxisSpacing: 4.0,
mainAxisSpacing: 8.0,
children: <Widget>[
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
],
)
Flutter GridView.count() example source code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("codesundar.com"),
centerTitle: true,
backgroundColor: Colors.red,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: GridView.count(
crossAxisCount: 3,
crossAxisSpacing: 4.0,
mainAxisSpacing: 8.0,
children: <Widget>[
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
],
)),
),
);
}
}Display Image using GridView.builder()
If you want to display Grid view dynamically or on demand, you can use GridView.builder().
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
List<String> images = ["https://placeimg.com/500/500/any", "https://placeimg.com/500/500/any", "https://placeimg.com/500/500/any", "https://placeimg.com/500/500/any", "https://placeimg.com/500/500/any"];
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("codesundar.com"),
centerTitle: true,
backgroundColor: Colors.red,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: GridView.builder(
itemCount: images.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, crossAxisSpacing: 4.0, mainAxisSpacing: 4.0),
itemBuilder: (BuildContext context, int index){
return Image.network(images[index]);
},
)),
),
);
}
}Output
Display Grid view using GridView.extent()
GridView.extent() helps you to create grids with custom extent value
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
List<String> images = ["https://placeimg.com/500/500/any", "https://placeimg.com/500/500/any", "https://placeimg.com/500/500/any", "https://placeimg.com/500/500/any", "https://placeimg.com/500/500/any"];
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("codesundar.com"),
centerTitle: true,
backgroundColor: Colors.red,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: GridView.extent(
maxCrossAxisExtent: 200,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0,
children: <Widget>[
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
Image.network("https://placeimg.com/500/500/any"),
],
)),
),
);
}
}Output
