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 {

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

Categories: Flutter Flutter Tutorial

Tags:

Flutter Grid View Example

Displaying Images using GridView.count()

Display Image using GridView.builder()

Display Grid view using GridView.extent()

Topics

About Me

Follow Me