Flutter: Bottom sheet with TextField/TextFormField

Question

In part of our application, I would like to have a simple form in BottomSheet like with the below code. unfortunately when i put into that, I get an error

The following assertion was thrown during performLayout(): An InputDecorator, which is typically created by a TextField, cannot have an unbounded width. This happens when the parent widget does not provide a finite width constraint. For example, if the InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains it. 'package:flutter/src/material/input_decorator.dart': Failed assertion: line 881 pos 7: 'layoutConstraints.maxWidth < double.infinity'

my implemented code:

  void _settingModalBottomSheet(context){
    showModalBottomSheet(
        context: context,
        elevation: 8.0,
        builder: (BuildContext bc){
          return Directionality(
            textDirection: TextDirection.rtl,
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: 250.0
              ),
              child: Container(
                padding: EdgeInsets.fromLTRB(0.0,10.0,0.0,10.0),
                child: new Wrap(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Center(
                        child: Text(
                          'please fill this form',
                          style: TextStyle(
                            fontSize: 13.0,
                          ),
                        ),
                      ),
                    ),
                    Divider(),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            Text('item 1'),
                            Container(
                              child: TextField(),
                            )
                          ],
                        ),
                        Column(
                          children: <Widget>[
                            Text('item 2'),
                            Container(
                              child: TextField(),
                            )
                          ],
                        ),

                      ],
                    ),
                  ],
                ),
              ),
            ),
          );
        }
    );
  }

Answer 1

You will have to provide a specific width to the TextField, simply provide width in your Container or wrap your Column in Expanded.

Solution 1

Container(
  width: 100, // do it in both Container
  child: TextField(),
),

---

Solution 2

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Expanded( // wrap your Column in Expanded
      child: Column(
        children: <Widget>[
          Text('item 1'),
          Container(child: TextField()),
        ],
      ),
    ),
    Expanded( // wrap your Column in Expanded
      child: Column(
        children: <Widget>[
          Text('item 2'),
          Container(child: TextField()),
        ],
      ),
    ),
  ],
),

Answer 2

In the above Question, the Column tries to be wider than the space the Row (its parent) can allocate to it, causing an overflow error. Why does the Column try to do that? To understand this layout behavior, you need to know how Flutter framework performs layout:

“To perform layout, Flutter walks the render tree in a depth-first traversal and passes down size constraints from parent to child… Children respond by passing up a size to their parent object within the constraints the parent established.”

In this case, the Row widget doesn’t constrain the size of its children, nor does the Column widget. Lacking constraints from its parent widget, the second Text widget tries to be as wide as all the characters it needs to display. The self-determined width of the Text widget then gets adopted by the Column which clashes with the maximum amount of horizontal space its parent the Row widget can provide.

How to fix it?

Well, you need to make sure the Column won’t attempt to be wider than it can be. To achieve this, you need to constrain its width. One way to do it is to wrap the Column in an Expanded widget:

The error can be avoided by wrapping the TextField in an Expanded or Flexible widget. So believe the column should be Expanded:

Row(     children: [       Expanded(       child: Column(           children: [             Text('This is the text and there enough to wrap'),             TextField()           ]       ))     ] );