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. The input can either be got 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. To add 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.

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

TextField in Flutter

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.

Enter your name in TextField

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. I hope this helps you one way or the other. Furthermore, if you have any questions or suggestions, you can leave a comment below. Also, you can consult a Flutter Developer to discuss your ideas related to flutter app development.

2 thoughts on “How to Add Borders to TextField in Flutter”

  1. Hеlⅼo to every bodү, it’s my first pay a visit of this wеblog; thіs wеbsite includes
    remaгkable and really fine informаtion in favor of visitors.

Leave a Comment

Your email address will not be published.

Translate »