Flutter Ecommerce app: Staggered Grid and Firestore

Introduction

In this article I will be demonstrating how to use the Staggered Grid along with data pulled from a connected Firestore Database. I will be doing this using a screen used to display the categories of products on an E-commerce app I first designed as a prototype , and then implemented using Flutter and Firestore.

The UI prototype

Staggered Grid — what is it?

The Staggered Grid View is basically an extension to the Grid View created by Romain Rastel. It allows us to create grids of varying heights and widths.

Im sure you have come across these sorts of grids as can be seen on the image sharing site, Pinterest.

Staggered Grid example from Pinterest

Creating and configuring the project

To continue, you will need to complete the following points:

• Create a Flutter project using Android Studio (and import the necessary packages)
• Create and link a Firebase project to the Flutter Project
• Populate the Firestore Database with the necessary data

Create a Flutter project using Android Studio

Let’s make a Flutter project named online_store. In the pubspec.yaml file add the following packages

cupertino_icons: ^0.1.2
cloud_firestore: ^0.12.5
firebase_storage: ^3.0.1
firebase_core: 0.4.0+3
flutter_staggered_grid_view: ^0.2.7
transparent_image: ^1.0.0

and remove all the default code in main.dart , replacing it with the following code :

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:transparent_image/transparent_image.dart';

void main() {
  runApp(MaterialApp(
    home: Home(),
    debugShowCheckedModeBanner: false,
  ));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(drawer: Drawer(), body: Stack(children: <Widget>[]) //Stack;
        );
  }
}

Create and link a Firebase project to the Flutter Project

Follow the instructions in the links I embedded. Take note, to migrate to Android X.

Add Firebase to your Flutter app | Firebase

AndroidX compatibility

Populate the Firestore Database with the necessary data

Once your database is up and running, go ahead and create the following structure — A products collection followed by 4 documents , each with the 4 fields seen for the Camera document.

Take note, to sequentially order the documents in the “pos” field, from 0 to 3 as this will influence where each item is displayed on the screen, in a clockwise manner. Also, keep the order of fields the same for all documents — image, pos, title, x, y.

Influence of “pos” field on final placement

The complete project is available on GitHub at this link:

zorgonred/Flutter_online_store_scattered_grid

Thank you for reading! Feel free to make any other suggestions or recommendations for future challenges. Leave a few claps if you enjoyed it !