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 :

Please refer to the tutorial below for a more comprehensive understanding of how to implement Flutter’s staggered gridview.

 

Project Structure :

This image illustrates 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) => Container(
    height: 120.0,
    width: 120.0,
  ),
  staggeredTileBuilder: (int index) => 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 :

Here’s the complete code for integrating Flutter’s staggered gridview into 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) => 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) => StaggeredTile.count(2, index.isEven ? 3 : 2),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        ),
      ),
    );
  }
}

 

 

Output :

This screen showcases the utilization of flutter staggered grid view.

 

If you have any questions, feel free to drop them in the comments below. If you enjoyed this tutorial, show us some love by liking and sharing for more exciting updates.