Flutter – Staggered Grid View
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.
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
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()
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.