Staggered Grid View - Flutter

Staggered Grid View is a layout that is used to show images and posts. As seen on a variety of social media channels, including Pinterest. The key advantage of Staggered Grid View is that it enhances the layout and creates a positive user experience. Staggered Grid View is made up of containers that are divided into rows and columns of varying sizes.

In this article, you will learn how to create your Staggered Grid widget in Flutter. So let’s take Staggered Grid​ example of the Table  in Flutter of Mobile application.


Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project). 


Step 2: Adding dependency in project 
 dependencies:
   flutter:
     sdk: flutter
    flutter_staggered_grid_view: ^0.4.0

Step 3: Adding material package 

Import method the runApp method in the main function call first while run the application.

 import 'package:flutter/material.dart';

 void main() {

     runApp(RunMyApp());

 }

Step 4: Creating a stateless widget   

 We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

 class RunMyApp extends StatelessWidget {

     const RunMyApp({super.key});  

    @override

    Widget build(BuildContext context) {

    return MaterialApp(home);O

     }

 }

Step 5:Final code of Staggered grid .
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

 List<StaggeredTile>  _cardTile = <StaggeredTile> [ 
   StaggeredTile.count(2, 1),
   StaggeredTile.count(2, 3),
   StaggeredTile.count(2, 3),
   StaggeredTile.count(2, 2),
   StaggeredTile.count(2, 3),
   StaggeredTile.count(2, 2),
 ];

 List<Widget>_listTile = <Widget>[
   BackGroundTile(backgroundColor: Colors.green, icondata: Icons.add_a_photo_rounded),
   BackGroundTile(backgroundColor: Colors.red, icondata: Icons.accessible),
   BackGroundTile(backgroundColor: Colors.blue, icondata: Icons.access_alarm),
   BackGroundTile(backgroundColor: Colors.pink, icondata: Icons.access_time_filled_rounded),
   BackGroundTile(backgroundColor: Colors.green, icondata: Icons.accessibility_new),
   BackGroundTile(backgroundColor: Colors.deepPurpleAccent, icondata: Icons.account_balance),
   BackGroundTile(backgroundColor: Colors.blue, icondata: Icons.account_balance_wallet_outlined),
 ];

 class  HomePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text("Candidroot solutions App"),
      ),
      body: Container(
        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({required this.backgroundColor, required this.icondata});

   @override
   Widget build(BuildContext context) {
     return Card(
       color: backgroundColor,
       child: Icon(icondata, color: Colors.white),
     );
   }
 }
Step 6: Output of above example.

Happy Coding!


365Bloggy June 19, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 540
Zoom In and Out to TextView in Android
0 183
How to underline text in textview
0 152
Shine Effect in Android
0 136
How to Create Marquee Text in Android?
0 116
Our blogs
Archive