GridView

If you want to display your items as a grid rather than a normal list of items that come one after the next. In this post we will use simple demo to look at all of the common use cases for making them. Consider this post reference.

Convert the data source into widgets

GridView.count(
          primary: false,
          padding: const EdgeInsets.all(20),
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          crossAxisCount: 3,
          children: <Widget>[
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('One'),
              color: Colors.teal[100],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Two'),
              color: Colors.teal[200],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Three'),
              color: Colors.teal[300],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Four'),
              color: Colors.teal[400],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Five'),
              color: Colors.teal[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Six'),
              color: Colors.teal[600],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Seven'),
              color: Colors.teal[700],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Eight'),
              color: Colors.teal[800],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Nine'),
              color: Colors.teal[900],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Ten'),
              color: Colors.green[100],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Eleven'),
              color: Colors.green[200],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Twelve'),
              color: Colors.green[300],
            ),
          ],
        )

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GridView';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: GridView.count(
          primary: false,
          padding: const EdgeInsets.all(20),
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          crossAxisCount: 3,
          children: <Widget>[
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('One'),
              color: Colors.teal[100],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Two'),
              color: Colors.teal[200],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Three'),
              color: Colors.teal[300],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Four'),
              color: Colors.teal[400],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Five'),
              color: Colors.teal[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Six'),
              color: Colors.teal[600],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Seven'),
              color: Colors.teal[700],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Eight'),
              color: Colors.teal[800],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Nine'),
              color: Colors.teal[900],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Ten'),
              color: Colors.green[100],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Eleven'),
              color: Colors.green[200],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Twelve'),
              color: Colors.green[300],
            ),
          ],
        ),
      ),
    );
  }
}

You can Download Source Code viaย Github.

26 Replies to “GridView”

    1. Hi, Thanks for your feedback. We are continuously working on adding more features to make your experience better.

  1. I used to be recommended this web site by way of my cousin. I’m not sure whether this put up is written via him as no one else understand such unique about
    my difficulty. You are amazing! Thanks!

  2. You’ve made some really good points there. I looked on the net
    for more information about the issue and found most people will go along with
    your views on this website.

  3. It’s remarkable to pay a quick visit this web site and reading the views of all
    mates regarding this paragraph, while I am also eager of getting know-how.

  4. My brother suggested I might like this web site. He was entirely right.
    This post truly made my day. You cann’t imagine just how much
    time I had spent for this info! Thanks!

  5. I do not even know how I ended up here, but I thought this post was great.
    I do not know who you are but definitely you are going to a famous blogger if you aren’t already ๐Ÿ˜‰ Cheers!

  6. I’m not sure where you are getting your information,
    but good topic. I needs to spend some time learning more
    or understanding more. Thanks for wonderful info I was looking for this information for
    my mission.

  7. Pretty nice post. I just stumbled upon your weblog and wanted to say that I’ve really enjoyed browsing
    your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

Leave a Reply

Your email address will not be published.