Flutter Textformfield Enabled Outline Border Thickness Customization

flutter textformfield enabled outline border thickness

In this tutorial, we’ll learn how to properly customize Flutter textformfield enabled outline border thickness by using practical Flutter code examples.

Introduction: Flutter Textformfield Enabled Outline Border Thickness

It specifies the height/thickness of Flutter textformfield enabled outline border. Outline border covers every side of textformfield.

We can see the enabled border when textformfield is not focused/tapped. We’ll first see the default outline enabled border thickness. After that, we’ll customize it practically.

Default Flutter Textformfield Enabled Outline Border Thickness

  • For that we have to implement a simple Flutter textformfield widget.
  • After that, we’ve to use the decoration constructor of Flutter textformfield, then pass it input decoration class.
  • Finally, we’ve to pass the outline input border class to its enabled border constructor. See the below code:
TextFormField(
           decoration: InputDecoration(
                  focusedBorder: OutlineInputBorder()
                ),
              )

flutter textformfield enabled outline border default thickness

We can see the default Flutter textformfield enabled outline border thickness in the above given image. Let’s now customize it.

Change Flutter Textformfield Enabled Outline Border Thickness (Multiple Examples)

For that we have to use the same process mentioned above and after that we have to use the border side constructor of the outline input border class and pass it the border side widget.

Then by using its width constructor, we can easily change Flutter textformfield enabled outline border thickness. This constructor takes a double(decimal) value but passing it an integer will also work just fine.

For demonstration, we’ll use multiple examples to show how it works. See below examples:

Example 1

flutter textformfield enabled outline border custom thickness

enabledBorder:
       OutlineInputBorder(borderSide: BorderSide(width: .3))

Example 2

flutter textformfield enabled outline border thickness

TextFormField(
       decoration: InputDecoration(
          enabledBorder:
             OutlineInputBorder(
               borderSide: BorderSide(width: 6)
                      )),
          )

So this is how we can properly customize Flutter textformfield enabled outline border thickness. Hope you like this post.

The complete source code of custom Flutter textformfield enabled outline border thickness is given in the next section.

Custom Flutter Textformfield Enabled Outline Border Thickness Source Code

flutter textformfield enabled outline border thickness

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 40),
                    child: TextFormField(
                      decoration: InputDecoration(
                          enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(width: 6))),
                    )))));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textformfield enabled outline border thickness. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.

Leave a Comment

Your email address will not be published.