Don't understand what widgets or settings give me necessary constraints

[Guyren Howe]

I read Renderflex children have non-zero flex…, which seemed to do a pretty good job of explaining the layout requirements in Flutter.

What it doesn't do is complete the theory with how I tell what widgets or settings give me the constraints to satisfy the layout algorithm.

When I search for advice about how to fix "renderflex children have non-zero…" and suchlike errors, I find a whole grab-bag of narrow solutions ("wrap the thing in an Expand", "wrap the thing in a Flex", "add a height constraint", "set shrinkwrap: true"…).

Is there some canonical list of what things provide constraints of what sort, or some way to easily glean this from the documentation, or something? Any advice about interpreting the errors that arise?

Right now, I'm trying to make a box I can drop draggable buttons into where it will queue them up (a dice-rolling app where you can make sets of dice you can roll together). I have, as the build in my DiceRow class: 

List<DieWidget> dice = [];

@override

 Widget build(BuildContext context) {

    return Row(

      children: [

        IconButton(

          icon:      Icon(Icons.refresh),

          tooltip:   'Reroll',

          onPressed: null,

        ),

        ListView(

          children:         dice,

          scrollDirection:  Axis.horizontal,

        )

      ]

    );

 

and a DiceRack class's build:

List<DiceRow> rows = [DiceRow()];

@override

Widget build(BuildContext context) {

  return Column( // This will be scrollable once I get the other one working

    children: rows,

  );

}

I've tried all of the grab-bag of things I mentioned at the top, scattered in various places. Everything I try seems like it might fit the theory explained in the first link above. But I can't get this thing to display without giving me some form of unbounded error or the like.

[Vikas Jilla]

I faced the same error last day with listview inside a column. Row and column expects their childs to specify width and height constraints but the list view is a type of widget which has unbounded width or height based on the scroll direction. So to fix this we need to wrap it inside Expand widget. Expand is useful to say that its child will occupy remaining available space. So, I think, the below code might fix this:

return Row(

      children: [

        IconButton(

          icon:      Icon(Icons.refresh),

          tooltip:   'Reroll',

          onPressed: null,

        ),

         Expand(

        child:ListView(

           children:         dice,

           scrollDirection:  Axis.horizontal,

         )

           ) 

      ]

    );

[Guyren Howe]

That gives me "Horizontal viewport was given unbounded height."

What I'd really like, as I say, is a good general theory of how to avoid this class of problems. But right now, I'll settle for an answer to this. Thanks for trying. :-)

[Wojciech S. Czarnecki]

On Mon, 1 Apr 2019 19:21:36 -0700 (PDT)
Guyren Howe <guy...@gmail.com> wrote:

> Is there some canonical list of what things provide constraints of what
> sort, or some way to easily glean this from the documentation, or
> something? Any advice about interpreting the errors that arise?

You need to dig into the docs for such details.

For the primer you may read:

https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

Hope this helps,

--
Wojciech S. Czarnecki
<< ^oo^ >> OHIR-RIPE

[Guyren Howe]

I can imagine a table of widgets, showing for each whether its default size is unbounded, whether there are options that change that. Maybe which widgets exist to impose constraints on the size.

I don't in general know what to do in a situation such as mine. When I ask, and when other folks have asked, I see a bunch of "use a Expanded" and the like, but no-one has shared a full theory that tells me how to understand and deal with a situation such as this. I imagine a table such as I described would be a large chunk of such an 

[Guyren Howe]

Still getting nowhere with this. The error doesn't give me enough feedback that I can see to identify where the overflow problem is occurring, and there are multiple ways to constrain dimensions (shrinkWrap, Expanded, …), so I'm left floundering about, trying things at random. Which I HATE doing, but I've found nothing online or in any of the responses so far that gives me a theory of constraints that is sufficient for me to just deduce a suitable answer.

The widget giving me a problem is DiceRack, whose state class is:

class _RackState extends State<DiceRack> {

  List<DiceRow> rows = [DiceRow()];

  @override

  Widget build(BuildContext context) {

    return Column(

      children: rows,

    );

  }

DiceRow's state class is:

class _RowState<DiceRow> extends State {

  List<DieWidget> dice = [];

  @override

  Widget build(BuildContext context) {

    return Row(

      children: [

        IconButton(

          icon:      Icon(Icons.refresh),

                      onPressed: null,

        ),

        ListView(

          children:         dice,

          scrollDirection:  Axis.horizontal,

        )

      ]

    );

  }

}

Short and simple. But it gives me:

flutter: Horizontal viewport was given unbounded width.
…

flutter:   parentData: <none> (can use size)

flutter:   constraints: BoxConstraints(unconstrained)

flutter:   size: MISSING

flutter:   axisDirection: right

flutter:   crossAxisDirection: down

flutter:   offset: ScrollPositionWithSingleContext#2bc2c(offset: 0.0, range: null..null, viewport: null,

flutter:   ScrollableState, BouncingScrollPhysics, IdleScrollActivity#236cf, ScrollDirection.idle)

flutter:   anchor: 0.0

Please, can someone tell me how to fix this, and better yet, explain how I tell what the unbounded problem is caused by, how I can tell from the above hopefully, and some sort of theory about how to avoid such problems.

[Guyren Howe]

I should have also included more for the bottom set of lines:

flutter: The following RenderObject was being processed when the exception was fired:

flutter:   RenderViewport#32781 NEEDS-LAYOUT NEEDS-PAINT

flutter:   creator: Viewport ← IgnorePointer-[GlobalKey#16383] ← Semantics ← Listener ← _GestureSemantics ←

flutter:   RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#f2a6b] ← _ScrollableScope ←

flutter:   _ScrollSemantics-[GlobalKey#c0c57] ← Scrollable ← ListView ← Row ← DiceRow ← ⋯

[Guyren Howe]

Following the "Baby Pool" advice here, I changed _RowState to (adding mainAxisSize:… min constraint and wrapping the ListView in Expanded):

class _RowState<DiceRow> extends State {

  List<DieWidget> dice = [];

  @override

  Widget build(BuildContext context) {

    return Row(

      mainAxisSize: MainAxisSize.min,

      children: [

        IconButton(

          icon:      Icon(Icons.refresh),

          tooltip:   'Reroll',

          onPressed: null,

        ),

        Expanded(child:ListView(

          children:         dice,

          scrollDirection:  Axis.horizontal,

        ))

      ]

    );

  }

}

Now I get "flutter: Horizontal viewport was given unbounded height."

Searching on that led me to try adding "shrinkWrap: true" to the ListView, but now I get the useless:

flutter:

flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially

flutter: more information in this error message to help you determine and fix the underlying cause.

I'm just floundering here. I can see suggestions to use Expanded, shrinkWrap: true, and Container but which and how and more important, why?