CODEWITHSUNDEEP
flutterdartflutter-textformfieldflutter-textinputfield
Valentin Vignal
Valentin Vignal

Reputation: 8298

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

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?

Upvotes: 2

Views: 589

Answers (2)

disal
disal

Reputation: 11

Does not help if you want to keep it floating but this does make it wrap:

child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Label text
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12),
            child: Text(
              label,
              style: TextStyle(
                color: Colors.grey.shade700,
                fontSize: 16,
              ),
              maxLines: null, // Allow label text to wrap if needed
              overflow: TextOverflow.visible,
            ),
          ),
          TextFormField(
            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',
              labelStyle: TextStyle(
                color: Colors.grey.shade700,
                fontSize: 16,
              ),

Upvotes: 0

Neil-NotNeo
Neil-NotNeo

Reputation: 996

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

Upvotes: 0

Related Questions