Reputation: 3156
So I am building a sort of image search and I need to display the images in a staggeredGridView since the images can be of different sizes. I have tried using StaggeredGridView.count, builder, countBuilder, extent but just cannot understand how to do it. In the builder, I cannot get more than 2 columns even though there is plenty of space for more. Here is the code I have tried (I have tried tons of different types as I mentioned above but this is what I tried last)
Container(
width: constraints.maxWidth,
height: constraints.maxHeight - 72,
child: StaggeredGridView.countBuilder(
crossAxisCount: 3,
padding: EdgeInsets.all(2.0),
staggeredTileBuilder: (int index) => new StaggeredTile.fit(2),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
itemCount: webPage['images_results'].length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: InkWell(
onTap: () {},
child: Column(children: <Widget>[
Image(
width: constraints.maxWidth * 0.2,
image: NetworkImage(
webPage['images_results'][index]['thumbnail']),
// placeholder: AssetImage('assets/Loading.gif'),
),
SizedBox(
height: 1,
),
Container(
width: constraints.maxWidth * 0.2,
child: Text(webPage['images_results'][index]['title'],
style: style1.copyWith(color: text2, fontSize: 16)),
),
SizedBox(
height: 1,
),
Text(webPage['images_results'][index]['source'],
style: style1.copyWith(color: text3, fontSize: 10)),
]),
),
);
},
))
Current Output
Any help would be appreciated. Please let me know if anymore code is needed
Upvotes: 0
Views: 112