Flutter Grid List Demo (GridView Widget)

main.dart

// Code Licensed under the Apache License, Version 2.0 - visit : https://github.com/akshatapp/flutter-gist/blob/master/LICENSE
// Demo code for Grid List (GridView) - To learn more visit : https://github.com/akshatapp/flutter-gist

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GRIDVIEW',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: GridViewPage(title: 'GRIDVIEW'),
    );
  }
}

class GridViewPage extends StatefulWidget {
  GridViewPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _GridViewPageState createState() => _GridViewPageState();
}

class _GridViewPageState extends State<GridViewPage> {
  bool gridViewColor = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
          backgroundColor: Colors.white,
          elevation: 0.0,
          title: Center(
            child: Wrap(
              spacing: 9.0,
              children: [
                Icon(
                  Icons.grid_view,
                  color: Colors.black,
                ),
                Text(
                  widget.title,
                  style: kTitleTextStyle,
                )
              ],
            ),
          )),
      body: gridViewColor ? buildGrid(list1) : buildGrid(list2),
      floatingActionButton: FloatingActionButton(
        elevation: 3.0,
        child: Icon(Icons.flip),
        onPressed: () {
          setState(() {
            gridViewColor = !gridViewColor;
          });
        },
      ),
    );
  }

  Widget buildGrid(List<Item> list) {
    return GridView.count(
      crossAxisCount: 2,
      crossAxisSpacing: 12,
      mainAxisSpacing: 12,
      padding: EdgeInsets.all(16.0),
      children: list.map((data) {
        return GestureDetector(
            onTap: () {
              Navigator.pushReplacementNamed(context, data.route);
            },
            child: Card(
              borderOnForeground: true,
              shadowColor: Colors.black45,
              elevation: 9.0,
              color: data.color,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  data.icon,
                  Padding(
                    padding: EdgeInsets.only(left: 16.0, right: 16.0),
                    child: data.title,
                  ),
                ],
              ),
            ));
      }).toList(),
    );
  }
}

class Item {
  Text title;
  Icon icon;
  Color color;
  String route;

  Item({this.title, this.icon, this.color, this.route});
}

Item item1 = new Item(
    title: Text(
      "Item 1",
      style: kTitleTextWhiteStyle,
    ),
    icon: Icon(
      Icons.filter_1,
      color: Colors.white,
    ),
    color: Color(0xFF0D47A1),
    route: '/');
Item item2 = new Item(
    title: Text(
      "Item 2",
      style: kTitleTextWhiteStyle,
    ),
    icon: Icon(
      Icons.filter_2,
      color: Colors.white,
    ),
    color: Colors.blue,
    route: '/');
Item item3 = new Item(
    title: Text(
      "Item 3",
      style: kTitleTextWhiteStyle,
    ),
    icon: Icon(
      Icons.filter_3,
      color: Colors.white,
    ),
    color: Colors.redAccent[700],
    route: '/');
Item item4 = new Item(
    title: Text(
      "Item 4",
      style: kTitleTextWhiteStyle,
    ),
    icon: Icon(
      Icons.filter_4,
      color: Colors.white,
    ),
    color: Colors.orange,
    route: '/');
Item item5 = new Item(
    title: Text(
      "Item 5",
      style: kTitleTextWhiteStyle,
    ),
    icon: Icon(
      Icons.filter_5,
      color: Colors.white,
    ),
    color: Colors.pink,
    route: '/');
Item item6 = new Item(
    title: Text(
      "Item 6",
      style: kTitleTextWhiteStyle,
    ),
    icon: Icon(
      Icons.filter_6,
      color: Colors.white,
    ),
    color: Color(0xFF00AF19),
    route: '/');

Item item7 = new Item(
    title: Text(
      "Item 1",
      style: kTitleTextStyle,
    ),
    icon: Icon(
      Icons.filter_1,
      color: Colors.redAccent[700],
    ),
    color: Colors.white,
    route: '/');
Item item8 = new Item(
    title: Text(
      "Item 2",
      style: kTitleTextStyle,
    ),
    icon: Icon(
      Icons.filter_2,
      color: Colors.deepPurple[900],
    ),
    color: Colors.white,
    route: '/');
Item item9 = new Item(
    title: Text(
      "Item 3",
      style: kTitleTextStyle,
    ),
    icon: Icon(
      Icons.filter_3,
      color: Colors.orange[900],
    ),
    color: Colors.white,
    route: '/');
Item item10 = new Item(
    title: Text(
      "Item 4",
      style: kTitleTextStyle,
    ),
    icon: Icon(
      Icons.filter_4,
      color: Colors.redAccent[700],
    ),
    color: Colors.white,
    route: '/');
Item item11 = new Item(
    title: Text(
      "Item 5",
      style: kTitleTextStyle,
    ),
    icon: Icon(
      Icons.filter_5,
      color: Colors.deepPurple[900],
    ),
    color: Colors.white,
    route: '/');
Item item12 = new Item(
    title: Text(
      "Item 6",
      style: kTitleTextStyle,
    ),
    icon: Icon(
      Icons.filter_6,
      color: Colors.orange[900],
    ),
    color: Colors.white,
    route: '/');

List<Item> list1 = [item1, item2, item3, item4, item5, item6];
List<Item> list2 = [item7, item8, item9, item10, item11, item12];

const TextStyle kTitleTextStyle = TextStyle(
  fontSize: 16.0,
  fontWeight: FontWeight.bold,
  color: Colors.black,
);

const TextStyle kTitleTextWhiteStyle = TextStyle(
  fontSize: 16.0,
  fontWeight: FontWeight.bold,
  color: Colors.white,
);