Siddharth Agrawal
Siddharth Agrawal

Reputation: 3156

Unable to have more than 2 columns in staggeredGridView

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)),
                ]),
              ),
            );
          },
        ))

Expected Output

Current Output enter image description here Any help would be appreciated. Please let me know if anymore code is needed

Using Wrap Output enter image description here

Upvotes: 0

Views: 112

Answers (0)

Related Questions