Search code examples
flutterlayoutflutter-layoutstaggered-gridviewflutter-layoutbuilder

How to use stack widget inside a StaggeredGridView in flutter?


Before Adding stack widget

After Adding stack widgetom/cFMse.png

why images get weird size when i use stack widget inside StaggeredGridView.. When i remove the stack from the grid view the layout seems perfectly fine . am i using the layout in a wrong way?

new StaggeredGridView.countBuilder(
                crossAxisCount: 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                itemCount:model.hit.length,
                itemBuilder: (context, index) {
                  return
                    Stack(
                     children: [
                       Container(
                         decoration: BoxDecoration(
                             color: Colors.transparent,
                             borderRadius: BorderRadius.all(Radius.circular(35))),
                         child:
                         ClipRRect(
                             borderRadius: BorderRadius.all(Radius.circular(35)),
                             child:FadeInImage.memoryNetwork(
                               placeholder: kTransparentImage, image: model.hit[index]['largeImageURL'],fit: BoxFit.cover,)

                         ),


                       )
                     ],
                    );

                },
                staggeredTileBuilder: (index) {
                  return new StaggeredTile.count(1, index.isEven ? 1.2 : 1.8);
                })

Solution

  • try passing a StackFit.expand argument to the Stack

    return
        Stack(
           fit: StackFit.expand, /// <-- expand to the size of the parent constraint
           children: [
              Container(
                decoration: BoxDecoration(
                  color: Colors.transparent,
                  borderRadius: BorderRadius.all(Radius.circular(35))),
                  child: ClipRRect(
                     borderRadius: BorderRadius.all(Radius.circular(35)),
                     child:FadeInImage.memoryNetwork(
                       placeholder: kTransparentImage, image: model.hit[index]['largeImageURL'],fit: BoxFit.cover,)
                     ),
                 )
            ],
    );