In this article, let's see how to create a Staggered grid view in flutter.
This is how Staggered Grid View looks like.
![](https://fluttercentral.com/Uploads/cc7ce727-e975-485e-bef5-be822865075f.pngwidth="50%height="auto](
First import the package.
And then use the following code to create the example.
color: #9cdcfe;](args) {
color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
}
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget {
color: #9cdcfe;](@
color: #9cdcfe;](override
color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext color: #9cdcfe;](context) {
color: #c586c0;](return color: #4ec9b0;](MaterialApp(
color: #9cdcfe;](home: color: #4ec9b0;](Scaffold(
color: #9cdcfe;](appBar: color: #4ec9b0;](AppBar(
color: #9cdcfe;](title: color: #4ec9b0;](Text(color: #ce9178;]('StaggeredGridView Example'),
),
color: #9cdcfe;](body: color: #569cd6;](new color: #4ec9b0;](StaggeredGridView.color: #4ec9b0;](countBuilder(
color: #9cdcfe;](crossAxisCount: color: #b5cea8;](4,
color: #9cdcfe;](itemCount: color: #b5cea8;](16,
color: #9cdcfe;](itemBuilder: (color: #4ec9b0;](BuildContext color: #9cdcfe;](context, color: #4ec9b0;](int color: #9cdcfe;](index) => color: #569cd6;](new color: #4ec9b0;](Container(
color: #9cdcfe;](color: color: #4ec9b0;](Colors.color: #9cdcfe;](green,
color: #9cdcfe;](child: color: #569cd6;](new color: #4ec9b0;](Center(
color: #9cdcfe;](child: color: #569cd6;](new color: #4ec9b0;](CircleAvatar(
color: #9cdcfe;](backgroundColor: color: #4ec9b0;](Colors.color: #9cdcfe;](white,
color: #9cdcfe;](child: color: #569cd6;](new color: #4ec9b0;](Text(color: #ce9178;]('
color: #ce9178;]($
color: #9cdcfe;](index
color: #ce9178;]('),
),
)),
color: #9cdcfe;](staggeredTileBuilder: (color: #4ec9b0;](int color: #9cdcfe;](index) =>
color: #569cd6;](new color: #4ec9b0;](StaggeredTile.color: #4ec9b0;](count(color: #b5cea8;](2, color: #9cdcfe;](index.color: #9cdcfe;](isEven ? color: #b5cea8;](1 : color: #b5cea8;](2),
color: #9cdcfe;](mainAxisSpacing: color: #b5cea8;](4.0,
color: #9cdcfe;](crossAxisSpacing: color: #b5cea8;](4.0,
),
),
);
}
}
`
If you want to play more, make modifications to the following line.
color: #569cd6;](new color: #4ec9b0;](StaggeredTile.color: #4ec9b0;](count(color: #b5cea8;](2, color: #9cdcfe;](index.color: #9cdcfe;](isEven ? color: #b5cea8;](1 : color: #b5cea8;](2),
`
Thanks,Srikanth