Flutter Grid View Example

SUNDARAVEL SUBSCRIBE

I teach how to build apps using ionic and flutter

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: