flutter-tutorial

Flutter GridView

A grid view is a graphical control element that displays tabular data in a grid format. We’ll learn how to render items in a grid view in the Flutter application in this part.

GridView is a Flutter widget that displays objects in a two-dimensional array (two-dimensional rows and columns). It will be used to display objects in a Grid, as the name implies. By touching on the desired item in the grid list, we can pick it. This widget can contain text, images, icons, and other content that will be shown in a grid arrangement according on the user’s needs. A scrollable 2-D array of widgets is another name for it. We may specify the direction because it is scrollable.

Code Snippet

A quick code snippet to display a grid of widgets using GridView class is

GridView(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  primary: false,
  padding: const EdgeInsets.all(20),
  children: <Widget>[
    // widgets
  ]
)

The default main axis is vertical axis, and the cross axis is horizontal axis. Using gridDelegate property, we have set the number of widgets to be arranged in the cross axis to 3.

We can also use GridView.count() constructor to create a grid of widgets with fixed number of tiles in the cross axis as shown in the following code snippet.

GridView.count(
  primary: false,
  padding: const EdgeInsets.all(20),
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  crossAxisCount: 2,
  children: <Widget>[
    // widgets
  ],
)

Example

In the following example, we display six widgets in a Grid View with three elements in the cross axis, meaning three items would be arranged along the horizontal axis. The items would be arranged from left to right, top to bottom.

import 'dart:ui';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Learn Code Zone';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: GridView(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
      ),
      primary: false,
      padding: const EdgeInsets.all(20),
      children: <Widget>[
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text("Tile 1"),
          color: Colors.orange[200],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text("Tile 2"),
          color: Colors.green[200],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text("Tile 3"),
          color: Colors.red[200],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text("Tile 4"),
          color: Colors.purple[200],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text("Tile 5"),
          color: Colors.blueGrey[200],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text("Tile 6"),
          color: Colors.yellow[200],
        ),
      ],
    ));
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *