Checkout MyThemeBox.com for Ionic & Flutter Themes
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
