Flutter Grid View Example

In this article, I’m going to explain how to work with a 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 {

  @override
  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 a 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"];

  @override
  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"];

  @override
  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

Download