staggered grid view in Flutter

<p>In this article, let's see how to create a Staggered grid view in flutter.</p> <p>This is how Staggered Grid View looks like.</p> <p>![](https://fluttercentral.com/Uploads/cc7ce727-e975-485e-bef5-be822865075f.pngwidth="50%height="auto](</p> <p>First import the package.</p> <p>And then use the following code to create the example.</p> <p id="4ec9b0;](MyApp());" color:="">color: #9cdcfe;](args) </p> <p>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #9cdcfe;](@ color: #9cdcfe;](override</p> <p>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.</p> <pre> color: #569cd6;](new color: #4ec9b0;](StaggeredTile.color: #4ec9b0;](count(color: #b5cea8;](2, color: #9cdcfe;](index.color: #9cdcfe;](isEven ? color: #b5cea8;](1 : color: #b5cea8;](2), </pre> <p> Thanks,Srikanth</p>