How to expand TextField in Container vertically to cover all available space in Flutter

flutter textfield flutter-layout expand

3,656

Solution 1

With Flutter 1.5.4 you can do simply the following:

Expanded(
  child: TextField(
    expands: true,
    maxLines: null,
  ),
)

It will occupy all vertical free space.

Solution 2

You need this.

TextFormField(
  decoration: InputDecoration(hintText: "Enter your very long text here"),
  maxLines: double.maxFinite.floor(), 
),

Edit: This is the final solution for you.

Container(
  padding: EdgeInsets.all(16),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("Title"),
      Container(
        margin: EdgeInsets.only(top: 8),
        child: TextField(
          controller: c_title,
          decoration: Styles.getInputFieldStyle(""),
        ),
      ),
      Container(
        margin: EdgeInsets.only(top: 16),
        child: Text("Feedback"),
      ),
      Expanded(
        child: LayoutBuilder(
          builder: (_, __) {
            return Container(
              color: Colors.blue,
              margin: EdgeInsets.only(top: 8),
              child: TextField(
                decoration: Styles.getInputFieldStyle(""),
                controller: c_feedback,
                maxLines: double.maxFinite.floor(),
                keyboardType: TextInputType.multiline,
              ),
            );
          },
        ),
      ),
      Container(
        margin: EdgeInsets.only(top: 16),
        width: double.infinity,
        child: RaisedButton(
          onPressed: () {
            _onSubmitPressed();
          },
          child: Text("Submit"),
          textColor: Colors.white,
          color: MyColors.theme_red,
        ),
      )
    ],
  ),
),

3,656

Author by

Asad

A passionate Mobile and PHP developer, worked as Lead developer on a project, self learner and team player. Colleagues know me as a highly creative, passionate for programming, who can always be trusted to tackle any problem. I can (and often do) work well alone, but I’m at my best collaborating with others.

Updated on December 10, 2022

Comments

Asad over 1 year

I want to expand a TextField to cover all the space vertically, its Container is expanding but TextField doesn't, here is design:

Blue is the Container area. but TextField is not expanding

This is the code I am using:

Container(
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text("Title"),
          Container(
            margin: EdgeInsets.only(top: 8),
            child: TextField(
              controller: c_title,
              decoration: Styles.getInputFieldStyle(""),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 16),
            child: Text("Feedback"),
          ),
          Expanded(
            child: Container(
              color: Colors.blue,
              margin: EdgeInsets.only(top: 8),
              child: TextField(
                decoration: Styles.getInputFieldStyle(""),
                controller: c_feedback,
                keyboardType: TextInputType.multiline,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 16),
            width: double.infinity,
            child: RaisedButton(
              onPressed: (){_onSubmitPressed();},
              child: Text("Submit"),
              textColor: Colors.white,
              color: MyColors.theme_red,
            ),
          )
        ],
      ),
    );