Make a TextField use the minimum required width

884

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"),
              ),
            ),
     ))),
  ),
);
Share:
884
UnicornsOnLSD
Author by

UnicornsOnLSD

Updated on December 20, 2022

Comments

  • UnicornsOnLSD
    UnicornsOnLSD over 1 year

    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