How to solve error on Flutter TextField overflow in Row Column?-CodePudding

Have a simple project with layout like as:

[selector 1]  [selector 2]

 ----------    ---------- 
|input    1|  |input    2|
|          |  |          |
|          |  |          |
 ----------    ----------

I tried using Row and Column like as:

class _ControllerState extends State<Controller> {

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Column(
          children: [
            DropdownButton(
              isExpanded: true,
              value: 'example-1',
              items: const [
                DropdownMenuItem(value: 'example-1', child: Text('Example 1')),
                DropdownMenuItem(value: 'example-2', child: Text('example 2')),
              ],
              onChanged: (String? value) => setState(() { }),
            ),
            const TextField(
              keyboardType: TextInputType.multiline,
              maxLines: null,
            ),
          ],
        ),
        Column(
          children: [
            DropdownButton(
              isExpanded: true,
              value: 'example-1',
              items: const [
                DropdownMenuItem(value: 'example-1', child: Text('Example 1')),
                DropdownMenuItem(value: 'example-2', child: Text('example 2')),
              ],
              onChanged: (String? value) => setState(() { }),
            ),
            const TextField(
              keyboardType: TextInputType.multiline,
              maxLines: null,
            ),
          ],
        )
      ],
    );
  }
}

The error says:

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming width constraints are unbounded.

When a row is in a parent that does not provide a finite width constraint, for example if it is in a horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the horizontal direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.

Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.

If this message did not help you determine the problem, consider using debugDumpRenderTree():
  https://flutter.dev/debugging/#rendering-layer
  http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
The affected RenderFlex is: RenderFlex#b42fa relayoutBoundary=up9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: offset=Offset(0.0, 0.0) (can use size)
  constraints: BoxConstraints(unconstrained)
  size: MISSING
  direction: horizontal
  mainAxisAlignment: spaceBetween
  mainAxisSize: min
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down
...  child 1: RenderIndexedStack#0679f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
...    constraints: MISSING
...    size: MISSING
...    alignment: AlignmentDirectional.centerStart
...    textDirection: ltr
...    fit: loose
...    index: 0
...    child 1: RenderConstrainedBox#36ad0 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: not positioned; offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      size: MISSING
...      additionalConstraints: BoxConstraints(0.0<=w<=Infinity, h=48.0)
...      child: RenderConstrainedBox#60315 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        additionalConstraints: BoxConstraints(0.0<=w<=Infinity, 48.0<=h<=Infinity)
...        child: RenderPositionedBox#57fde NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: <none>
...          constraints: MISSING
...          size: MISSING
...          alignment: AlignmentDirectional.centerStart
...          textDirection: ltr
...          widthFactor: expand
...          heightFactor: expand
...    child 2: RenderConstrainedBox#a51e7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: not positioned; offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      size: MISSING
...      additionalConstraints: BoxConstraints(0.0<=w<=Infinity, h=48.0)
...      child: RenderConstrainedBox#d6bcb NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        additionalConstraints: BoxConstraints(0.0<=w<=Infinity, 48.0<=h<=Infinity)
...        child: RenderPositionedBox#a32e5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: <none>
...          constraints: MISSING
...          size: MISSING
...          alignment: AlignmentDirectional.centerStart
...          textDirection: ltr
...          widthFactor: expand
...          heightFactor: expand
...  child 2: RenderSemanticsAnnotations#28a7b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
...    constraints: MISSING
...    size: MISSING
...    child: RenderExcludeSemantics#9b415 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: <none>
...      constraints: MISSING
...      size: MISSING
...      excluding: true
...      child: RenderConstrainedBox#16a53 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        additionalConstraints: BoxConstraints(w=24.0, h=24.0)
...        child: RenderPositionedBox#3a865 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: <none>
...          constraints: MISSING
...          size: MISSING
...          alignment: Alignment.center
...          textDirection: ltr
...          widthFactor: expand
...          heightFactor: expand
The creator information is set to: Row ← Padding ← Container ← DefaultTextStyle ← Stack ← Listener ← RawGestureDetector ← GestureDetector ← Semantics ← MouseRegion ← Semantics ← _FocusMarker ← ⋯
The nearest ancestor providing an unbounded width constraint is: RenderFlex#fde33 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=900.0, h=352.0)
...  size: MISSING
...  direction: horizontal
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: center
...  textDirection: ltr
...  verticalDirection: down

See also: https://flutter.dev/layout/

If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md
The relevant error-causing widget was: 
  DropdownButton<String> DropdownButton:file:///.../controller.dart:55:13
When the exception was thrown, this was the stack: 
#0      RenderFlex.performLayout.<anonymous closure> (package:flutter/src/rendering/flex.dart:933:9)
#1      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:936:6)
#2      RenderObject.layout (package:flutter/src/rendering/object.dart:2148:7)
#3      RenderBox.layout (package:flutter/src/rendering/box.dart:2430:11)
#4      RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:249:12)
#5      RenderObject.layout (package:flutter/src/rendering/object.dart:2148:7)
#6      RenderBox.layout (package:flutter/src/rendering/box.dart:2430:11)
#7      ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:56:11)

Size is missing? why do we need to declare a custom size for row or column? I try using Expanded class but same results. I found a rare solution using a SizedBox with custom width in TextField and works but can not expand to all width without same error.

The controller.dart:55:13 is first DropdownButton( and the controller is rendered over a TabBarView (one customized controller for each tab) into Expanded class.

How can I fix this error? Appreciate if someone can advise.

CodePudding user response：

Top widget is Row, and inner TextFiled are in a column, You can wrap the TextFiled widget with Expanded and therefore to have available space on Row, you need to again wrap Column widget with Expanded, Column children overflow is happening horizontally being inside Row. Providing width is fixing the issue.

class _ControllerState extends State<Controller> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Flexible(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                DropdownButton(
                  isExpanded: true,
                  value: 'example-1',
                  items: const [
                    DropdownMenuItem(
                        value: 'example-1', child: Text('Example 1')),
                    DropdownMenuItem(
                        value: 'example-2', child: Text('example 2')),
                  ],
                  onChanged: (String? value) => setState(() {}),
                ),
                const Expanded(
                  child: TextField(
                    keyboardType: TextInputType.multiline,
                    maxLines: null,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: Column(
              children: [
                DropdownButton(
                  isExpanded: true,
                  value: 'example-1',
                  items: const [
                    DropdownMenuItem(
                        value: 'example-1', child: Text('Example 1')),
                    DropdownMenuItem(
                        value: 'example-2', child: Text('example 2')),
                  ],
                  onChanged: (String? value) => setState(() {}),
                ),
                Expanded(
                  child: const TextField(
                    keyboardType: TextInputType.multiline,
                    maxLines: null,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

More about Unbounded height / width | Decoding Flutter

CodePudding user response：

Use Expanded Widget:

Wrap both TextFields in Expanded in a Row.

Row(
 [
  Expanded(child: TextField()),
  Expanded(child: TextField()),
 ],
)