In This Article

How to Add Borders to TextField in Flutter

TextField in Flutter is a text input widget that is most commonly used to collect inputs from users. We can the input either from a hardware keyboard or an on-screen keyboard. We can use the TextField widget in different forms like building forms, sending messages, creating search experiences, and many more. Flutter TextField allows different kinds of customizations like styling and alignment of the text as well as the cursor inside the TextField.

Adding borders to TextField in Flutter is also a major concern of developers while building an app. Delivering the best user experience to end-users is always the utmost priority of developers as well as enterprises. In order to accomplish that, you need to value several aspects of building a user-friendly app.

Adding borders to TextField in Flutter

You can add borders to TextField in Flutter to make your UI more interactive. Making each and every field prominent that is present on your screen is the only way to make your app user-friendly. A TextField in any flutter app usually requires a hint text and a label. Let’s move towards the code to add borders to TextField in Flutter.

Related Post – How to change text color in flutter?

TextFormField(
  decoration: InputDecoration(
    label: const Text('Name'),
    hintText: 'Enter your name',
    enabledBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.grey),
      borderRadius: BorderRadius.circular(10),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: const BorderSide(
        color: Colors.black,
        width: 2,
      ),
      borderRadius: BorderRadius.circular(15),
    ),
    errorBorder: OutlineInputBorder(
      borderSide: const BorderSide(
        color: Colors.red,
        width: 2,
      ),
      borderRadius: BorderRadius.circular(10),
    ),
  ),
),

Screenshots of the Output

As you can see, we have declared the label as “Name”. And you can see, the text field is showing “Name” as the label. Additionally, we defined the border color as gray and its circular radius as “10”. All the results are displayed accordingly in the code.

Furthermore, we declared the hint text as “Enter your name”. We declared its color as black, width as “2” and circular radius as 15. As you can see in the screenshot above, the label moves upwards and the hint text displays. It has a border around it with an increased width and circular radius representing what to write in the field.

Moreover, if there exists any error in the TextField flutter, the border will change its color to red.

Conclusion

Thus, you might become aware of the importance of adding borders to TextFields in Flutter after going through this article. We hope this blog helps you one way or the other. Furthermore, if you have any questions or suggestions, you can leave a comment below. Also, you can hire a flutter developer to discuss your ideas related to flutter app development.

Picture of Bashir Ahmad

Bashir Ahmad

When not savoring tortillas, Bashir captivates readers with helpful and engaging prose, driven by his passion for Flutter and a dedication to providing value.

Share on:

Leave a Comment

Your email address will not be published. Required fields are marked *