Staggered Grid View unable to show data in 2 columns

user_14080391 0
Viewed 1385

I am very new at Dart so if this problem seems trivial or not required, I apologize!!

I want to implement Pinterest-style grid layout for my feed with only 2 columns. I am using the staggered_grid_layout and I tried implementing an answer from a stackoverflow question. Here is my code till now:

home.dart

SizedBox(
            height: 535,
            width: 180,
            child: new StaggeredGridView.countBuilder(
              crossAxisCount: 2,
              itemCount: 10,
              itemBuilder: (BuildContext context, int index) => Card(
                child: Column(
                  children: <Widget>[
                    Image.network(storiesList[index]),
                    Text("Some text"),
                  ],
                ),
              ),
              staggeredTileBuilder: (int index) =>
              new StaggeredTile.fit(2),
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
            ),
          )

link to full code

NOTE: I added the SizedBox() because I was getting a Vertical viewport was given unbounded height error, please recommend an alternative if that is not alright

Thank you!

EDIT: How it looks right now

How it looks right now

EDIT: How it should look

How it should look

staggered-gridview flutter-widget flutter-layout flutter listview
2 Answers

Thanks for update, Check out below code no need of StaggeredGridView instead use GridTile,

GridView.count(
          physics: const NeverScrollableScrollPhysics(),
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          crossAxisCount: 2,
          childAspectRatio: 1.0,              
          padding: const EdgeInsets.all(4.0),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          children: new List<Widget>.generate(3, (index) {
            return new GridTile(
              child: InkResponse(
                child: new Card(
                // color:Colors.white,
                child: new Center(
                  child: new Text('XYZ'),
                 ),
                ),
                enableFeedback: true,
                onTap: () => _onSelected(index, items[index].toString().substring(0,10)), // Whatever you want on tap
                ),
              );
          }),
        ),
user_47769880

CrossAxisCount is the number of "tiles" you want to divide the grid. StaggeredTile.fit(x) is the number of tiles you want to use for item[index]. So, if CrossAxisCount is 2, StaggeredTile should be fit(1), if you want 2 columns. You can even say CrossAxisCount is 8 and StaggeredTile.fit(4) for 2 columns, StaggeredTile.fit(2) for 4 columns... and so on. In this way you can change Columns number for each row depending on any condition placed for StaggeredTile.fit.

user_25273960
Related