How to have a `TextField`'s label that wraps if too long?

289 Views Asked by At

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?

1

There are 1 best solutions below

1
Neil-NotNeo On

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'),
                            ),
                          ))
                        ],
                      ),