Skip to content
Related Articles

Related Articles

Flutter – Staggered Grid View
  • Last Updated : 15 Feb, 2021

Staggered Grid View is a type of layout that is used to display images and posts. As you see in various social platforms such as Pinterest and many more. The main feature of Staggered Grid View is that it makes the layout beautiful and develop a great User Experience. Staggered Grid View consists of containers present in Rows and columns of different sizes. Which displays images and posts of various sizes.

Features:

  • Set crossAxiscount & minAxiscount to the Grid view
  • Main_axis extent of tiles may be fixed or multiple of cell’s length.
  • Configurable main-axis and cross-axis margins between tiles.
  • SliverStaggeredGrid for using in a CustomScrollView.
  • Staggered and Spannable grid layouts.

Using the Staggered Grid View:

In this article, we are going to see how to implement Staggered Grid View in our Flutter Application. To build this follow the below steps.

  • Add the dependency to pubspec.yaml file.
dependencies:
    flutter_staggered_grid_view: ^0.3.2
  • Import the dependency to the main.dart file
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

Now, Let’s look into the implementation of Staggered Grid View. To do so follow the below steps:

Step 1:For Implementing Staggered Grid View in your project first you have to add the dependency in your pubspec.yaml file in the lib folder. Now click on pub.get and wait to configure it.

Step 2: Return Material App in main.dart() file. First, create MyApp() in StatelessWidget and in it return MaterialApp(). Now in MaterialApp() give the title of the app and add debugShowCheckModeBanner as false which will remove the debug banner in the app. Now add the Theme as Dark theme and after that represent first screen home: Homepage()



Dart




void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        
      //Title of an App
      title: 'GFG APP',
        
      //Theme of an App
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      darkTheme: ThemeData.dark(),
        
     // First Screen of App
      home: HomePage(),
    );
  }
}

Step 3: Now Import dependencies for Staggered Grid View in HomePage(). After Importing dependency create app bar inside the Scaffold. Now create a new Container() in the body. In that Container now implement Staggered Grid View as shown in the code below. Inside the Staggered Grid view, there is staggeredTiles. For which we have declared a List of 10 _cardTile which specify the size of your cards. After that, we have created a class BackGroundTile in StatelessWidget. In which we have declared two final variables backgroundColor and icon data. We have created a constructor for these variables. And returned Card which consists of backgroundColor and icondata. In Staggered Grid View we have declared children as _listTile. For which we have created a List which inherits properties from class BackGroundTile. Which consist of backgroundColor and icondata.

Dart




import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
  
//List of Cards with size
List<StaggeredTile>  _cardTile = <StaggeredTile> [
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
];
  
//List of Cards with color and icon
List<Widget>_listTile = <Widget>[
  BackGroundTile(backgroundColor: Colors.red, icondata: Icons.home),
  BackGroundTile(backgroundColor: Colors.orange, icondata: Icons.ac_unit),
  BackGroundTile(backgroundColor: Colors.pink, icondata: Icons.landscape),
  BackGroundTile(backgroundColor: Colors.green, icondata: Icons.portrait),
  BackGroundTile(backgroundColor: Colors.deepPurpleAccent, icondata: Icons.music_note),
  BackGroundTile(backgroundColor: Colors.blue, icondata: Icons.access_alarms),
  BackGroundTile(backgroundColor: Colors.indigo, icondata: Icons.satellite_outlined),
  BackGroundTile(backgroundColor: Colors.cyan, icondata: Icons.search_sharp),
  BackGroundTile(backgroundColor: Colors.yellowAccent, icondata: Icons.adjust_rounded),
  BackGroundTile(backgroundColor: Colors.deepOrange, icondata: Icons.attach_money),
];
  
class  HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GFG App"),
      ),
      body: Container(
  
        // Staggered Grid View starts here
        child: StaggeredGridView.count(
            crossAxisCount: 4,
          staggeredTiles: _cardTile,
          children: _listTile,
           mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
  
      ),
      ),
    );
  }
}
class BackGroundTile extends StatelessWidget {
  final Color backgroundColor;
  final IconData icondata;
  
  BackGroundTile({this.backgroundColor, this.icondata});
  
  @override
  Widget build(BuildContext context) {
    return Card(
      color: backgroundColor,
      child: Icon(icondata, color: Colors.white),
    );
  }
}

Output:

flutter_staggered_grid_view

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
My Personal Notes arrow_drop_up
Recommended Articles
Page :