Flutter Grid View Example

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-grid-view-count-example

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

flutter-grid-view-count-example

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

flutter-gridview-extent-example