Flutter Grid View Example

flutter-grid-view-example
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: http://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.<span class="hljs-built_in">count</span>(
  crossAxisCount: <span class="hljs-number">3</span>,
  crossAxisSpacing: <span class="hljs-number">4.0</span>,
  mainAxisSpacing: <span class="hljs-number">8.0</span>,
  children: <Widget>[
    <span class="hljs-built_in">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
    <span class="hljs-built_in">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
    <span class="hljs-built_in">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
    <span class="hljs-built_in">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
    <span class="hljs-built_in">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
    <span class="hljs-built_in">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
    <span class="hljs-built_in">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
    <span class="hljs-built_in">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
  ],
)

Flutter GridView.count() example source code

<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:flutter/material.dart';

void main() => runApp(<span class="hljs-type">MyApp</span>());

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatelessWidget</span> </span>{

  <span class="hljs-meta">@override</span>
  <span class="hljs-type">Widget</span> build(<span class="hljs-type">BuildContext</span> context) {
    <span class="hljs-comment">// <span class="hljs-doctag">TODO:</span> implement build</span>
    <span class="hljs-keyword">return</span> <span class="hljs-type">MaterialApp</span>(
      home: <span class="hljs-type">Scaffold</span>(
        appBar: <span class="hljs-type">AppBar</span>(
          title: <span class="hljs-type">Text</span>(<span class="hljs-string">"codesundar.com"</span>),
          centerTitle: <span class="hljs-literal">true</span>,
          backgroundColor: <span class="hljs-type">Colors</span>.red,
        ),
        body: <span class="hljs-type">Container</span>(
          padding: <span class="hljs-type">EdgeInsets</span>.all(<span class="hljs-number">16.0</span>),
          child: <span class="hljs-type">GridView</span>.count(
          crossAxisCount: <span class="hljs-number">3</span>,
          crossAxisSpacing: <span class="hljs-number">4.0</span>,
          mainAxisSpacing: <span class="hljs-number">8.0</span>,
          children: <<span class="hljs-type">Widget</span>>[
            <span class="hljs-type">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
            <span class="hljs-type">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
            <span class="hljs-type">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
            <span class="hljs-type">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
            <span class="hljs-type">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
            <span class="hljs-type">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
            <span class="hljs-type">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
            <span class="hljs-type">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
          ],
        )),
      ),
    );
  }
}

Display Image using GridView.builder()

If you want to display a Grid view dynamically or on-demand, you can use GridView.builder().

<span class="hljs-keyword">import</span> <span class="hljs-string">'package:flutter/material.dart'</span>;

<span class="hljs-keyword">void</span> main() => runApp(MyApp());

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatelessWidget</span> </span>{

  List<String> images = [<span class="hljs-string">"http://placeimg.com/500/500/any"</span>, <span class="hljs-string">"http://placeimg.com/500/500/any"</span>, <span class="hljs-string">"http://placeimg.com/500/500/any"</span>, <span class="hljs-string">"http://placeimg.com/500/500/any"</span>, <span class="hljs-string">"http://placeimg.com/500/500/any"</span>];

  <span class="hljs-meta">@override</span>
  <span class="hljs-function">Widget <span class="hljs-title">build</span><span class="hljs-params">(BuildContext context)</span> </span>{
    <span class="hljs-comment">// <span class="hljs-doctag">TODO:</span> implement build</span>
    <span class="hljs-keyword">return</span> MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(<span class="hljs-string">"codesundar.com"</span>),
          centerTitle: <span class="hljs-keyword">true</span>,
          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, <span class="hljs-keyword">int</span> index){
              <span class="hljs-function"><span class="hljs-keyword">return</span> Image.<span class="hljs-title">network</span><span class="hljs-params">(images[index])</span></span>;
            },
        )),
      ),
    );
  }
}

Output

Display Grid view using GridView.extent()

GridView.extent() helps you to create grids with custom extent value

<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:flutter/material.dart';

void main() => runApp(<span class="hljs-type">MyApp</span>());

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatelessWidget</span> </span>{

  <span class="hljs-type">List</span><<span class="hljs-type">String</span>> images = [<span class="hljs-string">"http://placeimg.com/500/500/any"</span>, <span class="hljs-string">"http://placeimg.com/500/500/any"</span>, <span class="hljs-string">"http://placeimg.com/500/500/any"</span>, <span class="hljs-string">"http://placeimg.com/500/500/any"</span>, <span class="hljs-string">"http://placeimg.com/500/500/any"</span>];

  <span class="hljs-meta">@override</span>
  <span class="hljs-type">Widget</span> build(<span class="hljs-type">BuildContext</span> context) {
    <span class="hljs-comment">// <span class="hljs-doctag">TODO:</span> implement build</span>
    <span class="hljs-keyword">return</span> <span class="hljs-type">MaterialApp</span>(
      home: <span class="hljs-type">Scaffold</span>(
        appBar: <span class="hljs-type">AppBar</span>(
          title: <span class="hljs-type">Text</span>(<span class="hljs-string">"codesundar.com"</span>),
          centerTitle: <span class="hljs-literal">true</span>,
          backgroundColor: <span class="hljs-type">Colors</span>.red,
        ),
        body: <span class="hljs-type">Container</span>(
          padding: <span class="hljs-type">EdgeInsets</span>.all(<span class="hljs-number">16.0</span>),
          child: <span class="hljs-type">GridView</span>.extent(
            maxCrossAxisExtent: <span class="hljs-number">200</span>,
            crossAxisSpacing: <span class="hljs-number">4.0</span>,
            mainAxisSpacing: <span class="hljs-number">4.0</span>,
            children: <<span class="hljs-type">Widget</span>>[
              <span class="hljs-type">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
              <span class="hljs-type">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
              <span class="hljs-type">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
              <span class="hljs-type">Image</span>.network(<span class="hljs-string">"http://placeimg.com/500/500/any"</span>),
            ],
        )),
      ),
    );
  }
}

Output