1

I'm trying to have a long TextField's label that doesn't overflow but wraps.

If I use InputDecoration({String labelText}), the label overflows:

TextField(
  decoration: InputDecoration(
    labelText: 'Very veryy veryyy veryyyy veryyyyy long loong looong loooong lable text text text text text text text text text text text text text text text',
  ),
),

enter image description here

I tried to use InputDecoration({Widget label}) instead with a Text that would wrap, but the layout has issues: the label is over the inputted value:

TextField(
  decoration: InputDecoration(
    label: Text('Very veryy veryyy veryyyy veryyyyy long loong looong loooong lable text text text text text text text text text text text text text text text'),
  ),
),

enter image description here

How can I properly wrap a long label in a TextField?

Valentin Vignal
  • 6,151
  • 2
  • 33
  • 73

1 Answers1

0

try with Expanded widget as below:

    Row(
                        children: const [
                          Expanded(
                              child: TextField(
                            decoration: InputDecoration(
                              contentPadding: EdgeInsets.symmetric(
                                  horizontal: 15, vertical: 20),
                              label: Text(
                                  'Very veryy veryyy veryyyy veryyyyy long loong looong loooong lable text text text text text text text text text text text text text text text'),
                            ),
                          ))
                        ],
                      ),
Niladri Raychaudhuri
  • 792
  • 2
  • 11
  • I tried your code, the `Row` + `Expanded` doesn't change anything. The `contentPadding` only fixes the issue when the label is 2 lines long but not if it is longer. I'm don't think that is a proper approach for a responsive design solution – Valentin Vignal May 08 '23 at 10:12