Staggered Grid View in Flutter - How to give tiles different widths

Question

I've been trying to create the following screen in Flutter:

https://i.sstatic.net/28Q5L.png

So far I've made this with the package "Staggered Grid View":

https://i.sstatic.net/H1fJf.png

Sorry for not being able to upload the images..

However, I still can't figure out how to use different widths for the tiles. The first tile needs to fill around 70% of the containers size and the right one the rest.

At the moment I have the following code:

new StaggeredGridView.countBuilder(
          padding: EdgeInsets.all(30),
          crossAxisCount: 2,
          itemCount: 7,
          itemBuilder: (BuildContext context, int index) => new Container(
              margin: EdgeInsets.all(4),
              color: Colors.green,
              child: new Center(
                child: new CircleAvatar(
                  backgroundColor: Colors.white,
                  child: new Text('$index'),
                ),
              )),
          staggeredTileBuilder: (int index) => (index == 0)
              ? new StaggeredTile.count(2, 1)
              : (index % 2 == 0)
                  ? new StaggeredTile.count(1, 0.8)
                  : new StaggeredTile.count(1, 0.8),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        )

Answer 1

You don't need to have

itemCount: 7

instead, just use

staggeredTiles: [StaggeredTile.extent(width in crossAxisCount, height in units)]

Here's my code. Haven't tested it but it should be close to what you want.

body: StaggeredGridView.count(
    crossAxisCount: 10, //this indicates how much elements (or cards) you want to put in a row
    crossAxisSpacing: 6.0,
    mainAxisSpacing: 6.0,
    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
    children: [
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),          
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),
    ],
    staggeredTiles: [
      StaggeredTile.extent(10, 200), //second parameter is for adjusting the height of the element
      StaggeredTile.extent(6, 150),
      StaggeredTile.extent(4, 150),
      StaggeredTile.extent(3, 150),
      StaggeredTile.extent(5, 150),
      StaggeredTile.extent(2, 150),
      StaggeredTile.extent(6, 150),
      StaggeredTile.extent(4, 150),
    ],
  ),

I hope my answer satisfies you :)