Flutter Staggered Gridview Implementation

Flutter staggered gridview :

Flutter staggered gridview is used to display the images in staggered way just like social networking app like pin-interest, instagram…, which is a different than the normal grid view which we have seen in previous blog.

Staggered gridview consists of the multiple columns with different rows with varying sizes used to display the images of different sizes.

Images of different screen dimensions are easily shown using a Staggered Grid view by adjusting them accordingly we can also populate videos.

Gridview provides the flexibility to have multiple columns based on the space availability, it fits the best and can’t be replaced by any other component.

In this part of the tutorial we just consider two rows in real time you can just alter the count to add more rows to your flutter staggered gridview.

Flutter staggered gridview video tutorial :

Go through the below tutorial for more details on implementation on flutter staggered gridview.

Project Structure :

This image depicts the project structure for flutter staggered gridview.

pubspec.yaml :

Add a dependency flutter_staggered_grid_view and update the version according to the latest available.

flutter_staggered_grid_view: 0.3.1

main.dart :

Initialize with void main() and consider default class MyApp()

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

Return a materialApp and provide title and home tag.

MaterialApp(
  title: "Flutter Staggered View",
  home: MyHome(),
);

Declare a Staggered Grid View with parameters required like height, weight, crossAxisCount, itemCount and more depending upon your requirement.

Inside the item builder you can get the index value based on which you can populate the images.

Based on the index value we are changing the tile count which you can observe in Staggered tile Count line.

child: StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 15,
  itemBuilder: (BuildContext context, int index) => new Container(
      height: 120.0,
      width: 120.0,
     
     ),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 3 : 2),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
),

Add a network image to populate image from url and here we are providing index number for image

NetworkImage('https://picsum.photos/500/500?random=$index'),

Provide the decoration for box specifying the BoxShape, fit type.

decoration: BoxDecoration(
  image: DecorationImage(
    image: NetworkImage('https://picsum.photos/500/500?random=$index'),
    fit: BoxFit.fill,
  ),
  shape: BoxShape.rectangle,
),

Full Code :

Providing the full code for flutter staggered gridview integration in your app.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Staggered View",
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: StaggeredGridView.countBuilder(
          crossAxisCount: 4,
          itemCount: 15,
          itemBuilder: (BuildContext context, int index) => new Container(
              height: 120.0,
              width: 120.0,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage('https://picsum.photos/500/500?random=$index'),
                  fit: BoxFit.fill,
                ),
                shape: BoxShape.rectangle,
              ),
             ),
          staggeredTileBuilder: (int index) =>
              new StaggeredTile.count(2, index.isEven ? 3 : 2),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        ),
      ),
    );
  }
}