GridView Demo in Flutter

By | October 10, 2018

Hi Friends,

Today we will see how to implement GridView in Flutter.



We are going to use this service for the data
First we will create a Model for the Grid Cell

class HomeCellVO {
  int id;
  String title;
  String icon;

  HomeCellVO({, this.title, this.icon});

  factory HomeCellVO.fromJson(Map<String, dynamic> json) {
    return HomeCellVO(
      id: json['id'] as int,
      title: json['title'] as String,
      icon: json['icon'] as String,

No we will create view for Grid Cell

Create a file named “cell.dart” and copy this into it.

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

class Cell extends StatelessWidget {
  const Cell(this.homeCellVO);
  final HomeCellVO homeCellVO;

  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: new Column(
          children: <Widget>[
                width: 100.0,
                height: 100.0,
                fit: BoxFit.cover),

Service Class

We have the below service class for fetching the data.


import 'dart:async';
import 'dart:convert';
import 'home_cell.dart';
import 'constants.dart';
import 'package:http/http.dart' as http;

class Services {
  static Future<List<HomeCellVO>> fetchHomeData() async {
    final response = await http.get(CONSTANTS.HOME_SERVICE_URL);
    if (response.statusCode == 200) {
      List<HomeCellVO> list = parsePostsForHome(response.body);
      return list;
    } else {
      throw Exception(CONSTANTS.INTERNET_ERROR);

  static List<HomeCellVO> parsePostsForHome(String responseBody) {
    final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
    return<HomeCellVO>((json) => HomeCellVO.fromJson(json)).toList();

To read about the http implementation, please read this post.

Also we have a seperate file for constants called constants.dart

  static const String INTERNET_ERROR = "No Internet Connection";
  static const HOME_SERVICE_URL = '';


Now the class that implements the GridView


import 'package:flutter/material.dart';

import 'cell.dart';
import 'constants.dart';
import 'home_cell.dart';
import 'services.dart';

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

  final String title;

  _MyHomePageState createState() => new _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  List<HomeCellVO> homeCells = new List();

  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        body: Container(
          child: FutureBuilder<List<HomeCellVO>>(
            future: Services.fetchHomeData(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return new Padding(
                  padding: new EdgeInsets.all(10.0),
                  child: GridView.builder(
                    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2),
                    itemBuilder: (BuildContext context, int index) {
                      return new GestureDetector(
                        child: Cell([index]),
                        onTap: () => gridClicked(index),
              } else if (snapshot.hasError) {
                return Text(CONSTANTS.INTERNET_ERROR);

gridClicked(int index) {
  print('gridClicked : $index');

gridClicked is the function for handling the clicks in the Grid.

Great, we are all done.

Please leave your valuable comments below this post.

All Done

All Done

One thought on “GridView Demo in Flutter

Leave a Reply

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