How to Layout a Grid In Flutter?

4 min read
Layout grid in Flutter
Layout grid in Flutter

In a Mobile Application, you might have seen that show data in a card where each card resides side by side to each other. Generally in that kind of scenario GridView Widget is used for the same. So in this article, We will go through How to Layout a Grid In Flutter.

Let’s dive into the following.

How to Layout a Grid In Flutter?

Consider a case where the user wants to display data in layout a 4×4 grid of tiles in a flutter. Code Snippet will look like below:

import 'package:flutter/material.dart';

void main() {
  runApp( MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(

      color: Colors.white30,
      child: GridView.count(
          crossAxisCount: 4,
          childAspectRatio: 1.0,
          padding: const EdgeInsets.all(4.0),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          children: <String>[
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
          ].map((String url) {
            return GridTile(
                child: Image.network(url, fit: BoxFit.cover));
          }).toList()),
    );
  }
}

Our output will look like below:

Grid In Flutter
Grid In Flutter

Here is the video representation of the following:

Consider a solution like the below:

  • GridView.count(…):
GridView.count(
  crossAxisCount: 2,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)
  • GridView.builder(…)
    GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      itemBuilder: (_, index) => FlutterLogo(),
      itemCount: 4,
    )
  • GridView(…)
    GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      children: <Widget>[
        FlutterLogo(),
        FlutterLogo(),
        FlutterLogo(),
        FlutterLogo(),
      ],
    )
  • GridView.custom(…)
    GridView.custom(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      childrenDelegate: SliverChildListDelegate(
        [
          FlutterLogo(),
          FlutterLogo(),
          FlutterLogo(),
          FlutterLogo(),
        ],
      ),
    )
  • GridView.extent(…)
    GridView.extent(
      maxCrossAxisExtent: 400,
      children: <Widget>[
        FlutterLogo(),
        FlutterLogo(),
        FlutterLogo(),
        FlutterLogo(),
      ],
    )

    Output (same for all):

    "<yoastmark

    GridView Widget is used for implementing material grid lists. If you know you have a fixed number of items and it’s not very many (16 is fine), you can use GridView.count.

    However, you should note that a GridView is scrollable, and if that isn’t what you want, you may be better off with just rows and columns.

    Grid In a Flutter
    Grid In a Flutter

Conclusion:

Thanks for being with us on Flutter journey!!

So in this article, we have been through How to Layout a Grid In Flutter.

Keep Learning!!! Keep Fluttering!!!

Still, need support for Flutter? Let us know in the comments and we will love to assist you 馃檪

FlutterAgency.com聽is our portal Platform dedicated to聽Flutter Technology聽and聽Flutter Developers. The portal is full of cool resources from Flutter like聽Flutter Widget聽Guide,聽Flutter Projects,聽Code libs聽and etc.

FlutterAgency.com is one of the most popular online portals dedicated to聽Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of聽Flutter.

Leave a Reply