'How to increase the text field label size (width) in flutter?

There is any way to increase the text field label width in flutter, to avoid the ellipses (...)?

The label is always smaller than the text field area.

All I could think to improve this, was decrease the "start" and "end" of content padding, but the effect is minimal.

                  child: TextField(
                    decoration: InputDecoration(
                        labelText: "em Dólares",
                        labelStyle: TextStyle(color: Colors.amber[600],
                            fontStyle: FontStyle.italic),
                        border: OutlineInputBorder(),
                        fillColor: Colors.black12,
                        filled: true,
                        contentPadding: EdgeInsetsDirectional.only(top: 20.0, bottom: 20.0, start: 5.0, end: 5.0),  //<-- weak solution
                        prefixText: "US\$"),
                    style: TextStyle(color: Colors.amber[600], fontSize: 20.0),
                  )

Ps: I hide in the code above some unecessary properties from the text field, as controller, inputFormatters, keyboardType.

flutter flutter-layout

Solution 1:^[1]

To change(reduce/increase) the font size of a label you can use fontSize: attribute in TextStyle(). Just add font size to label.

Solution 2:^[2]

Shrink the font size of the label text using the fontSize property in labelStyle. Flutter will display the ellipses if the text for the label goes over about half the size of the text field (I cannot find this in the documentation, but have dealt with this issue myself).

  child: TextField(
                    decoration: InputDecoration(
                        labelText: "em Dólares",
                        labelStyle: TextStyle(color: Colors.amber[600],
                            fontStyle: FontStyle.italic, fontSize: 10),
                        border: OutlineInputBorder(),
                        fillColor: Colors.black12,
                        filled: true,
                        contentPadding: EdgeInsetsDirectional.only(top: 20.0, bottom: 20.0, start: 5.0, end: 5.0),  //<-- weak solution
                        prefixText: "US\$"),
                    style: TextStyle(color: Colors.amber[600], fontSize: 20.0),
                  )

Solution 3:^[3]

I think you could modify your floatingLabelStyle and floatingLabelAlignment(as opposed to the labelStyle):

        TextField(
            style: TextStyle(
              color: Colors.grey,
              fontWeight: FontWeight.bold,
            ),
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'I am a very long text string yes I am',
              prefixText: "US\$",
              floatingLabelAlignment: FloatingLabelAlignment.start,
              floatingLabelStyle: TextStyle(
                color: Colors.green,
                fontSize: 16,
              ),
            ),
          ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Amol Gangadhare
Solution 2	Jeremy Caney
Solution 3	jurgenizer

'How to increase the text field label size (width) in flutter?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]