Flutter "Incorrect use of ParentDataWidget." when using Staggered Grid View~ @_@

Question

                                   @_@

I was thinking to make the widgets inside the GridView to have a different height according to their dynamic content height, and those widgets are Containers with an Expanded Column inside. But it then gave me this error "Incorrect use of ParentDataWidget".

The widget looks like this:

Container(
      decoration: BoxDecoration(
        color: someColor,
        borderRadius: BorderRadius.circular(17),
      ),
      child: Expanded(
        child: Column(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(17),
              child: AspectRatio(
                aspectRatio: 5 / 3,
                child: Image.network(someImageUrl, fit: BoxFit.cover),
              ),
            ),
            SizedBox(height: 10),
            Text('Group name'),
            Text('Group desc'),
            SizedBox(height: 10),
            Expanded(
              child: Row(
                children: List.generate(
                  _group.popIds.length,
                  (_) => SizedBox(width: 50, height: 50),
                ),
              ),
            ),
            Text('Hello')
          ],
        ),
      ),
    );

And this is the screen that holds those widgets:

Scaffold(
          body: Padding(
            padding:
                const EdgeInsets.only(left: 17.0, right: 17.0, top: 50),
            child: StaggeredGridView.countBuilder(
              crossAxisCount: 2,
              mainAxisSpacing: 10,
              crossAxisSpacing: 20,
              itemCount: 50,
              itemBuilder: (context, index) => GroupItem(),
              staggeredTileBuilder: (index) => StaggeredTile.fit(1),
            ),
          ),
        );

And the error message looks like this:

** Incorrect use of ParentDataWidget.

The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.**

Are there some genius can help me with this issue, since I've been struggling with it for a whole day!~ @_@

Answer 1

This is because you are using Expanded inside a container. Expanded should be used only inside Column, Row, or Flex widgets.

In your first code snippet, remove the first Expanded widget that's inside container and wrapping your column, but you can keep the second Expanded widget which is wrapping the row, because this expanded is inside a column, and then the error should go away.