Brand

Flutter GridView

A grid view is used to show items in the grid form,/b>. In this section, we are going to learn how to use the grid view to render items in a grid in the application.

GridView widget is used to display the items in a 2-D array. As the name suggests, it will be used to show items in a Grid view. We can select or deselect the desired item from the grid list by tapping on them. We can add text, images, icons, etc. in a grid. It is also known as a scrollable 2-D grid of widgets.

We can implemented the crid in various ways, which are given below:
  1. count()
  2. builder()
  3. custom()
  4. extent()

Let us discuss all of the above in detail.

GridView.count()

It is the most used type of gridview, we use this when we already know the grid’s size. Developers can specify the fixed number of items.

The GriedView.count() have the following properties:
  • crossAxisCount: This property specifies the number of columns.
  • crossAxisSpacing: This property specifies the number of space between each child widget listed in the cross axis.
  • mainAxisSpacing: This property specifies the number of pixels between each child widget listed in the main axis.
  • padding(EdgeInsetsGeometry): This property specifies the space around the whole Grid of widgets.
  • scrollDirection: This property specifies the direction in which the items on GridView scrolls. By default, it scrolls in a vertical direction.
  • reverse: Using this property we can reverse the list in the opposite direction along the main axis.
  • physics: This property determines how the list behaves when the user reaches the end or the start of the widget while scrolling.
Example

Let us understand it with an example to see how to use GridView in Flutter for making grid lists. 

import 'package:flutter/material.dart';  
  
void main() {runApp(MyApp());}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
        home: Scaffold(appBar: AppBar(  
          title: Text("Flutter GridView Demo"),  
        ),  
            body: GridView.count(  
                crossAxisCount: 3,  
                crossAxisSpacing: 4.0,  
                mainAxisSpacing: 8.0,  
                children: List.generate(choices.length, (index) {  
                  return Center(  
                    child: SelectCard(choice: choices[index]),  
                  );  
                }  
                )  
            )  
        )  
    );  
  }  
}  
  
class Choice {  
  const Choice({this.title, this.icon});  
  final String title;  
  final IconData icon;  
}  
  
const List choices = const [  
  const Choice(title: 'Home', icon: Icons.home),  
  const Choice(title: 'Contact', icon: Icons.contacts),  
  const Choice(title: 'Map', icon: Icons.map),  
  const Choice(title: 'Phone', icon: Icons.phone),  
  const Choice(title: 'Camera', icon: Icons.camera_alt),  
  const Choice(title: 'Setting', icon: Icons.settings),  
  const Choice(title: 'Album', icon: Icons.photo_album),  
  const Choice(title: 'WiFi', icon: Icons.wifi),  
];  
  
class SelectCard extends StatelessWidget {  
  const SelectCard({Key key, this.choice}) : super(key: key);  
  final Choice choice;  
  
  @override  
  Widget build(BuildContext context) {  
    final TextStyle textStyle = Theme.of(context).textTheme.display1;  
    return Card(  
        color: Colors.orange,  
        child: Center(child: Column(  
            crossAxisAlignment: CrossAxisAlignment.center,  
            children: [  
              Expanded(child: Icon(choice.icon, size:50.0, color: textStyle.color)),  
              Text(choice.title, style: textStyle),  
            ]  
        ),  
        )  
    );  
  }  
}
Output

flutter-grid-view-count-demo

GridView.builder()

This property is used to display data dynamically or on-demand. In other words, if the user wants a grid with infinite number of children, then we use the GridView.builder() constructor with a SliverGridDelegateWithFixedCrossAxisCount or a SliverGridDelegateWithMaxCrossAxisExtent property.

The common attributes of this widget are:
  • itemCount: This property defines the amount of data to be displayed.
  • gridDelegate: This property determines the grid or its divider. It can not be null.
  • itemBuilder: It is used to add items to be displayed on the grid view.
Example
import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  
  List images = [  
    "https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png",  
    "https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png",  
    "https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png",  
    "https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png"  
  ];  
  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: Scaffold(  
        appBar: AppBar(  
          title: Text("Flutter GridView Demo"),  
          backgroundColor: Colors.red,  
        ),  
        body: Container(  
            padding: EdgeInsets.all(12.0),  
            child: GridView.builder(  
              itemCount: images.length,  
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(  
                  crossAxisCount: 2,  
                  crossAxisSpacing: 4.0,  
                  mainAxisSpacing: 4.0  
              ),  
              itemBuilder: (BuildContext context, int index){  
                return Image.network(images[index]);  
              },  
            )),  
      ),  
    );  
  }  
}
Output

flutter-grid-view-builder-demo

GridView.extent()

This property is used to make a grid with custom extent values. It means each tile has a maximum crossaxis extent.

Example
import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  // This widget is the root of your application.  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyGridScreen(),  
    );  
  }  
}  
  
class MyGridScreen extends StatefulWidget {  
  MyGridScreen({Key key}) : super(key: key);  
  
  @override  
  _MyGridScreenState createState() => _MyGridScreenState();  
}  
  
class _MyGridScreenState extends State {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text("Flutter GridView Demo"),  
        backgroundColor: Colors.green,  
      ),  
      body: Center(  
          child: GridView.extent(  
            primary: false,  
            padding: const EdgeInsets.all(16),  
            crossAxisSpacing: 10,  
            mainAxisSpacing: 10,  
            maxCrossAxisExtent: 200.0,  
            children: [  
              Container(  
                padding: const EdgeInsets.all(8),  
                child: const Text('First', style: TextStyle(fontSize: 20)),  
                color: Colors.yellow,  
              ),  
              Container(  
                padding: const EdgeInsets.all(8),  
                child: const Text('Second', style: TextStyle(fontSize: 20)),  
                color: Colors.blue,  
              ),  
              Container(  
                padding: const EdgeInsets.all(8),  
                child: const Text('Third', style: TextStyle(fontSize: 20)),  
                color: Colors.blue,  
              ),  
              Container(  
                padding: const EdgeInsets.all(8),  
                child: const Text('Four', style: TextStyle(fontSize: 20)),  
                color: Colors.yellow,  
              ),  
              Container(  
                padding: const EdgeInsets.all(8),  
                child: const Text('Fifth', style: TextStyle(fontSize: 20)),  
                color: Colors.yellow,  
              ),  
              Container(  
                padding: const EdgeInsets.all(8),  
                child: const Text('Six', style: TextStyle(fontSize: 20)),  
                color: Colors.blue,  
              ),  
            ],  
          )),  
    );  
  }
Output

flutter-grid-view-extent-demo

Previous
Next
Subscribe Now