Flutter – Staggered Grid View

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.
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.
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 sizeList<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 iconList<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:
android
Flutter
Flutter UI-components
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Custom Bottom Navigation Bar
Splash Screen in Flutter
Flutter - Asset Image
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - Stack Widget
Flutter - Search Bar