CODEWITHSUNDEEP
formsflutter
UnicornsOnLSD
UnicornsOnLSD

Reputation: 773

Make a TextField use the minimum required width

For a TextField to work in Flutter, you need to give it a length. I've got a form working by wrapping the TextFields in Expandeds but I'd rather have the TextField resize based on the required width so that as the user types, the TextField expands. Here's my form code:

return Row(
                children: <Widget>[
                  Expanded(
                    child: TextFormField(
                      keyboardType: TextInputType.number,
                      initialValue: snapshot.data[0].toString(),
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(labelText: "Width", labelStyle: ),
                    ),
                  ),
                  Expanded(
                    child: TextFormField(
                      keyboardType: TextInputType.number,
                      initialValue: snapshot.data[1].toString(),
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(labelText: "Height"),
                    ),
                  ),
                ],
              );

And here is a picture of my form:

Form screenshot

Upvotes: 1

Views: 2017

Answers (2)

Ayyaz Shair
Ayyaz Shair

Reputation: 620

Simply add horizontal padding to the TextField like this

  return Scaffold(
  body: Center(
    child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: List.generate(2,
            (index) => Expanded(
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 16.0),
                    child: TextFormField(
                      keyboardType: TextInputType.number,
                      initialValue: index == 0 ? "3280" : "2464",
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(
                          labelText: index == 0 ? "Width" : "Height"),
              ),
            ),
     ))),
  ),
);

Upvotes: 1

M.B
M.B

Reputation: 619

You should set width for your text form field

for example:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              child: TextFormField(
                keyboardType: TextInputType.number,
                initialValue: "11",
                textAlign: TextAlign.center,
                decoration: InputDecoration(labelText: "Width"),
              ),
            ),
            Container(
              width: 100,
              child: TextFormField(
                keyboardType: TextInputType.number,
                initialValue: "22",
                textAlign: TextAlign.center,
                decoration: InputDecoration(labelText: "Height"),
              ),
            ),
          ],
        ),
      ),
    );
  }

Upvotes: 0

Related Questions