GridView GridTile in flutter

GridView GridTile in flutter

A grid view is a graphical control element used to show items in the tabular form. In this section, we are going to learn how to render items in a grid view in the Flutter application

GridView is a widget in Flutter that displays the items in a 2-D array (two-dimensional rows and columns)

It is also referred to as a scrollable 2-D array of widgets.

The grid view can be implemented in various ways, which are given below:

  1. count()
  2. builder()
  3. custom()
  4. extent()

GridView.count()

It is the most frequently used grid layout in Flutter because here, we already know the grid’s size. It allows developers to specify the fixed number of rows and columns. The GriedView.count() contains the following properties:

crossAxisCount: It is used to specify the number of columns in a grid view.

crossAxisSpacing: It is used to specify the number of pixels between each child widget listed in the cross axis.

mainAxisSpacing: It is used to specify the number of pixels between each child widget listed in the main axis.

padding(EdgeInsetsGeometry): It is used to specify the space around the whole list of widgets.

scrollDirection: It is used to specify the direction in which the items on GridView scrolls. By default, it scrolls in a vertical direction.

reverse: If it is true, it will reverse the list in the opposite direction along the main axis.

physics: It is used to determine how the list behaves when the user reaches the end or the start of the widget while scrolling.

shrinkWrap: If it is false, the scrollable list takes more space for scrolling in scroll direction. It is not good because it wastage memory and reduces app performance. Therefore, we will wrap our children widgets using shrinkWrap by setting it to true to avoid memory leakage while scrolling.

Example

  1. import ‘package:flutter/material.dart’;
  3. void main() {runApp(MyApp());}
  5. class MyApp extends StatelessWidget {
  6.   @override
  7.   Widget build(BuildContext context) {
  8.     return MaterialApp(
  9.         home: Scaffold(appBar: AppBar(
  10.           title: Text(“Flutter GridView Demo”),
  11.         ),
  12.             body: GridView.count(
  13.                 crossAxisCount: 3,
  14.                 crossAxisSpacing: 4.0,
  15.                 mainAxisSpacing: 8.0,
  16.                 children: List.generate(choices.length, (index) {
  17.                   return Center(
  18.                     child: SelectCard(choice: choices[index]),
  19.                   );
  20.                 }
  21.                 )
  22.             )
  23.         )
  24.     );
  25.   }
  26. }
  28. class Choice {
  29.   const Choice({this.title, this.icon});
  30.   final String title;
  31.   final IconData icon;
  32. }
  34. const List<Choice> choices = const <Choice>[
  35.   const Choice(title: ‘Home’, icon: Icons.home),
  36.   const Choice(title: ‘Contact’, icon: Icons.contacts),
  37.   const Choice(title: ‘Map’, icon: Icons.map),
  38.   const Choice(title: ‘Phone’, icon: Icons.phone),
  39.   const Choice(title: ‘Camera’, icon: Icons.camera_alt),
  40.   const Choice(title: ‘Setting’, icon: Icons.settings),
  41.   const Choice(title: ‘Album’, icon: Icons.photo_album),
  42.   const Choice(title: ‘WiFi’, icon: Icons.wifi),
  43. ];
  45. class SelectCard extends StatelessWidget {
  46.   const SelectCard({Key key, this.choice}) : super(key: key);
  47.   final Choice choice;
  49.   @override
  50.   Widget build(BuildContext context) {
  51.     final TextStyle textStyle = Theme.of(context).textTheme.display1;
  52.     return Card(
  53.         color: Colors.orange,
  54.         child: Center(child: Column(
  55.             crossAxisAlignment: CrossAxisAlignment.center,
  56.             children: <Widget>[
  57.               Expanded(child: Icon(choice.icon, size:50.0, color: textStyle.color)),
  58.               Text(choice.title, style: textStyle),
  59.             ]
  60.         ),
  61.         )
  62.     );
  63.   }
  64. }

GridView.builder()

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

The common attributes of this widget are:

itemCount: It is used to define the amount of data to be displayed.

Example

  1. import ‘package:flutter/material.dart’;
  3. void main() => runApp(MyApp());
  5. class MyApp extends StatelessWidget {
  7.   List<String> images = [
  8.     “https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png”,
  9.     “https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png”,
  10.     “https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png”,
  11.     “https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png”
  12.   ];
  14.   @override
  15.   Widget build(BuildContext context) {
  16.     return MaterialApp(
  17.       home: Scaffold(
  18.         appBar: AppBar(
  19.           title: Text(“Flutter GridView Demo”),
  20.           backgroundColor: Colors.red,
  21.         ),
  22.         body: Container(
  23.             padding: EdgeInsets.all(12.0),
  24.             child: GridView.builder(
  25.               itemCount: images.length,
  26.               gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  27.                   crossAxisCount: 2,
  28.                   crossAxisSpacing: 4.0,
  29.                   mainAxisSpacing: 4.0
  30.               ),
  31.               itemBuilder: (BuildContext context, int index){
  32.                 return Image.network(images[index]);
  33.               },
  34.             )),
  35.       ),
  36.     );
  37.   }
  38. }

Output

GridView.extent()

This property is used when we want to create a grid with custom extent values. It means each tile has a maximum cross-axis extent.

Example

  1. import ‘package:flutter/material.dart’;
  3. void main() => runApp(MyApp());
  5. class MyApp extends StatelessWidget {
  6.   // This widget is the root of your application.
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.       home: MyGridScreen(),
  11.     );
  12.   }
  13. }
  15. class MyGridScreen extends StatefulWidget {
  16.   MyGridScreen({Key key}) : super(key: key);
  18.   @override
  19.   _MyGridScreenState createState() => _MyGridScreenState();
  20. }
  22. class _MyGridScreenState extends State<MyGridScreen> {
  23.   @override
  24.   Widget build(BuildContext context) {
  25.     return Scaffold(
  26.       appBar: AppBar(
  27.         title: Text(“Flutter GridView Demo”),
  28.         backgroundColor: Colors.green,
  29.       ),
  30.       body: Center(
  31.           child: GridView.extent(
  32.             primary: false,
  33.             padding: const EdgeInsets.all(16),
  34.             crossAxisSpacing: 10,
  35.             mainAxisSpacing: 10,
  36.             maxCrossAxisExtent: 200.0,
  37.             children: <Widget>[
  38.               Container(
  39.                 padding: const EdgeInsets.all(8),
  40.                 child: const Text(‘First’, style: TextStyle(fontSize: 20)),
  41.                 color: Colors.yellow,
  42.               ),
  43.               Container(
  44.                 padding: const EdgeInsets.all(8),
  45.                 child: const Text(‘Second’, style: TextStyle(fontSize: 20)),
  46.                 color: Colors.blue,
  47.               ),
  48.               Container(
  49.                 padding: const EdgeInsets.all(8),
  50.                 child: const Text(‘Third’, style: TextStyle(fontSize: 20)),
  51.                 color: Colors.blue,
  52.               ),
  53.               Container(
  54.                 padding: const EdgeInsets.all(8),
  55.                 child: const Text(‘Four’, style: TextStyle(fontSize: 20)),
  56.                 color: Colors.yellow,
  57.               ),
  58.               Container(
  59.                 padding: const EdgeInsets.all(8),
  60.                 child: const Text(‘Fifth’, style: TextStyle(fontSize: 20)),
  61.                 color: Colors.yellow,
  62.               ),
  63.               Container(
  64.                 padding: const EdgeInsets.all(8),
  65.                 child: const Text(‘Six’, style: TextStyle(fontSize: 20)),
  66.                 color: Colors.blue,
  67.               ),
  68.             ],
  69.           )),
  70.     );
  71.   }
  72. }

Output

From Last Lecture

just replace the list view code with the following grid view code with additional decoration

author avatar
saqib

You may also like

Beautiful UI design in flutter
5 January, 2023

Beautiful UI design in flutter In project home page import velocity and put the previous lecture list with the following properties import ‘package:flutter/material.dart’; import ‘package:flutter/services.dart’; import ‘dart:convert’; import ‘package:flutter_catalog/models/catalog.dart’; import ‘package:flutter_catalog/widgets/drawer.dart’; import ‘package:flutter_catalog/widgets/item_widget.dart’; import ‘package:flutter_catalog/widgets/themes.dart’; import ‘package:velocity_x/velocity_x.dart’; class HomePage extends …

Json Mapping-Data Class Generator-ProgressIndicator
20 December, 2022

Json Mapping-Data Class Generator-Progress Indicator in Flutter if we have to get data in json formate than we first have to map the data in catalog.dart file like this import ‘dart:convert’; class CatalogModel { static List<Item> items; } class Item …

List view Builder in Flutter
20 December, 2022

List view Builder in Flutter The first basic step is to import the required material design package. Let’s import it. import ‘package:flutter/material.dart’; 2. Create Custom Data Class In this step, I will create a Company Stocks class that has names …

Leave A Reply