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!~ @_@

Solution

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.

Comments

[Ryan Wang]

Very appreciate your answer, and it solved the problem, but I got another error looks like this: "RenderFlex children have non-zero flex but incoming height constraints are unbounded." and "RenderBox was not laid out: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1940 pos 12: 'hasSize'", something about hasSize and the constraint. @_@

[Huthaifa Muayyad]

You're most welcome, kindly consider marking it as an answer to your question. Regarding your new error, it's different, and has to do with how your widgets are being laid out. Post the code that is causing this error in a new question or post so we can work with it.

[Ryan Wang]

Yes thank you, the problem has been moved to this Url: stackoverflow.com/q/66791193/14930256