Fill row with TextField?

Question

I am test Flutter UI codelab and find issue.

In composing messages field TextField is not expand to fill Row. So when user try tap on message area there is space above and under TextField which not trigger TextField. (so no open keyboard)

Try the code and tap little bit under divider. It not trigger TextField:

Widget _buildTextComposer() {
  return new IconTheme(                                            //new
    data: new IconThemeData(color: Theme.of(context).accentColor), //new
    child: new Container(                                     //modified
      margin: const EdgeInsets.symmetric(horizontal: 8.0),
      child: new Row(
        children: <Widget>[
          new Flexible(
            child: new TextField(
              controller: _textController,
              onSubmitted: _handleSubmitted,
              decoration: new InputDecoration.collapsed(
                hintText: "Send a message"),
            ),
          ),
          new Container(
            margin: new EdgeInsets.symmetric(horizontal: 4.0),
            child: new IconButton(
              icon: new Icon(Icons.send),
              onPressed: () => _handleSubmitted(_textController.text)),
          ),
        ],
      ),
    ),                                                             //new
  );
}

How to expand TextField so not have this issue?

Answer 1

I think the reason is

InputDecoration.collapsed(hintText: "Send a message")

Your problem should get solved if you change it to

InputDecoration(hintText: "Send a message")

Edit: When you remove the collapsed constructor you will have to set border to none explicitly like this in order to not have the underline

InputDecoration(border: InputBorder.none)

Edit: This sample code demostrates the results;

Widget _buildTextComposer(BuildContext context) {
    return new IconTheme(
      //new
      data: new IconThemeData(color: Theme.of(context).accentColor), //new
      child: new Container(
        //modified
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        child: new Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Expanded(
              child: new TextField(
                controller: _textController,
                onSubmitted: (s) {},
                decoration:
                    new InputDecoration(
                      hintText: "Send a message", 
                      fillColor: Colors.green,
                      filled: true,
                      border: InputBorder.none),
              ),
            ),
            new Container(
              margin: new EdgeInsets.symmetric(horizontal: 4.0),
              child: new IconButton(
                  icon: new Icon(Icons.send),
                  onPressed: () {}),
            ),
          ],
        ),
      ), //new
    );
  }

This code provides this result:

The reason for the space on top is the height of the row is larger than your textfield and unfortunately at the time of writing this textfields don't expand vertically and they determine their height depending on their max line count.

Finally there is an open issue in flutter github related to this problem

Allow multiline TextField to expand vertically to fit container #21943