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!

in Mobile

365Bloggy June 19, 2024

Staggered Grid View - Flutter

Step-by-Step Implementation

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

Step 2: Adding dependency in project

Step 3: Adding material package

Step 4: Creating a stateless widget

Step 5:Final code of Staggered grid .

Step 6: Output of above example.

Share this post

Tags

SUBSCRIBE THIS FORM

Recent Posts

Our blogs

Archive

Follow us