Flutter gridview implementation

Flutter Gridview :

Flutter gridview let’s you arrange the data in terms of rows and column, you can assign multiple rows based on the screen size and also orientation (portrait and landscape).

In previous blogs we are seen the usage of flutter listview now similarly we see the usage of gridview, there exists a similarity in both listview & gridview i.e., the both are used to populate data dynamically.

Dynamically means when there is no specific count of the data to be displayed then we use these views.In specific gridview we can display data in two-dimensional i.e., rows and columns.

Now a days you can find gridview usage in popular apps like instagram, facebook, youtube and more social networking apps use gridview to populate the images.

In this tutorial we have considered and sample url using which we can load default data you can follow the entire tutorial and then later customize it accordingly.

Flutter Gridview Video Tutorial :

Go through the below video tutorial for more detailed implementation on Gridview.

Project Structure :

This image depicts the usage of flutter Gridview project implementations.

main.dart

Initialize the code with void main and specify the default class MyApp()

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

Declare a flutter gridview with 2 columns.

body: GridView.count(

  crossAxisCount: 2,
  
),

Generate a grid view with 100 items and based on the index value.

List.generate(100, (index)

Declare a image view and textview in flutter gridview for data to be displayed you can also customize the data according to the requirement.

Image :

Here we are considering a image from the network using a url we will be loading.You can also make use of the local assets and load data.

Image.network(
  'https://picsum.photos/500/500?random=$index',
  width: 100,
  height: 100,
),

Text :

Consider a text field to show the name.You can also add multiple Text widgets and provide the description section as well.

Text(
  'Text $index',
  style: Theme.of(context).textTheme.headline5,
),

Fullcode :

Providing the full source code for gridview implementation.

import 'package:flutter/material.dart';

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

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

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: GridView.count(

          crossAxisCount: 2,
          children: List.generate(100, (index) {
            return Center(
              child: Column(
                children: <Widget>[
                  Image.network(
                    'https://picsum.photos/500/500?random=$index',
                    width: 100,
                    height: 100,
                  ),
                  Text(
                    'Text $index',
                    style: Theme.of(context).textTheme.headline5,
                  ),
                ],
              ),
            );
          }),
        ),
      ),
    );
  }
}

Output :

This screen depicts the usage of flutter gridview implementation.

If you have any query’s on this tutorial on flutter Gridview implementation do let us know in comment section below.If you like this tutorial do like and share for more interesting tutorials.