title: Dynamically change the gridview crossaxis count to populate dynamic columns in flutter
body: <p>I'm working on a gridview from flutter framework to achieve a dynamic column count, but didn't get a solution.
  I have tried using GridView.count and Gridview.builder with itembuilder and i didn't get the expected result.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Please find the image of the design to be achieved.<a href="https://i.stack.imgur.com/bSHxm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bSHxm.png" alt="enter image description here"></a></p>
  
  <p>edit : after using staggeredGridview i'm getting the below result</p>
  
  <pre><code>return StaggeredGridView.countBuilder(
        crossAxisCount: 2,
    itemBuilder: (BuildContext context, int index) {
      if (index % 2 == 0) {
        return Container(
          child: setupTile('no'),
        );
      } else {
        return Container(
          child: setupTiles('title','title2'),
        );
      }
    },
    staggeredTileBuilder: (int index) =&gt;
        index % 2 == 0 ? new StaggeredTile.fit(2) : new StaggeredTile.fit(1),
    mainAxisSpacing: 4.0,
    crossAxisSpacing: 4.0,
    padding: const EdgeInsets.all(4.0),
    itemCount: 30,
    primary: false,
    shrinkWrap: true,
  );
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/uhF2Q.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uhF2Q.png" alt="enter image description here"></a></p>
  
  <p>Final Edit / Solution figuredout.</p>
  
  <pre><code>I have confused about the staggeredGridView later and lot many hit and trails finally figured it out.
   This might be helpful for others, following below steps.
  1) understand how the StaggeredGrid works with crossAxisCount and StaggeredTile.count
  2)if we define crossAxisCount =2 the StaggeredTile.count must be (2,1) for this instance Tile.count(2(will occupy the complete screen width) and 1 will strech the height of the tile.
  3) for the same example if we define crossAxisCount=4 the StaggeredTile.count(4,1) here if we specify four it will occupy full width with single tile and if we specify 2 it will occupy half of the screen and will give space to second tile whose StaggeredTile will be (2,1).
  </code></pre>
  
  <p>ALso check with the below code followed by image.</p>
  
  <pre><code> return new StaggeredGridView.countBuilder(
    crossAxisCount: 2, //as per your requirement
    itemCount:8 , //as per your requirement
    itemBuilder: (BuildContext context, int index) {
      if (index % 2 == 0) { //for even row
        return setupTile(shoplist[index].title); //your required widget
      } else { //for odd row
        return setupTiles(shoplist[index].title,shoplist[index].title); //you//your required widget
      }
    },
    staggeredTileBuilder: (int index){
      if(shoplist[index].catID==1){
        return new StaggeredTile.count(2,1);
      }else{
        return new StaggeredTile.count(1,1);
      }
    }
  );
  </code></pre>
  
  <p>Here catID is used to specify the category. it is anything of your choice.</p>
  
  <p><a href="https://i.stack.imgur.com/FgqYK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FgqYK.png" alt="enter image description here"></a></p>