Flutter textformfield label text position

by

Flutter Textformfield Label Text Position

In Flutter, you can use the TextFormField widget to create an input field with a label. By default, the label text is positioned at the top left corner of the text input field. However, you can customize the position of the label text using the contentPadding property.

Here’s an example:

    
      TextFormField(
        decoration: InputDecoration(
          labelText: 'Username',
          contentPadding: EdgeInsets.fromLTRB(20, 10, 20, 10), // Adjust padding as per your requirement
        ),
      )

In the above example, we have set the contentPadding property to EdgeInsets.fromLTRB(20, 10, 20, 10). This means the top padding is 20, right padding is 10, bottom padding is 20, and left padding is 10.

You can adjust these values to change the position of the label text. For example, increasing the top padding will move the label text further away from the top of the input field.

Additionally, you can also use the labelStyle property to customize the style of the label text. For example:

    
      TextFormField(
        decoration: InputDecoration(
          labelText: 'Username',
          contentPadding: EdgeInsets.fromLTRB(20, 10, 20, 10),
          labelStyle: TextStyle(
            color: Colors.red, // Change label text color
            fontWeight: FontWeight.bold, // Apply bold style
          ),
        ),
      )

In the above example, we have set the label text color to red and applied a bold style using the labelStyle property. You can customize other text properties like font size, text alignment, etc. using this property.

Leave a comment