How To Change Flutter Textfield Enabled Border Width [Easy Flutter Code Example]

flutter textfield enabled border width

In this tutorial, we’ll learn what Flutter textfield enabled border width is and how to properly change it. We’ll be using practical Flutter code examples for better understanding.

Introduction: Flutter Textfield Enabled Border Width

It specifies the thickness/height of border line of Flutter textfield widget. In our post, we’ll use the word ‘width‘ to specify the thickness/height of border line. Let’s first see its default width/thickness and after that, we’ll customize it practically.

Default Enabled Border Width

For that, we’ll implement a simple Flutter textfield widget. By default, the textfield is assigned with underline border which we’ll see in the below image after our code gets executed. See below code:

TextField()

flutter textfield enabled border default width

The above image shows the default Flutter textfield enabled border width. Let’s now see how to changes its width/thickness.

Change Flutter Textfield Enabled Border Width

  • In order to do that, we’ve to use the decoration constructor of textfield widget class and pass it input decoration.
  • After that, we’ll use the enabled border constructor of input decoration and pass it underline input border as we are currently customizing the underline border width.
  • Finally, we’ve to use the border side constructor of underline input border and pass it border side widget and then by using its width constructor, we can easily customize its width. This constructor takes a double(decimal) value but passing it integer will also work just fine. For demonstration, we’ve passed it a value 3. See below code:
TextField(
        decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                     width: 3))),
      )

flutter textfield enabled border width

As we can see that Flutter textfield enabled border width is successfully customized.

See below code if you want to change the outline border width of textfield.

TextField(
      decoration: InputDecoration(
          enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(
                   width: 4))),
      )

flutter textfield enabled outline border width

So this is how we can easily change Flutter textfield enabled border width.

Click here if you are interested in learning the color customization of Flutter textfield enabled border.

The complete source code of custom enabled border width is given in the below section.

Custom Flutter Textfield Enabled Border Width Source Code

flutter textfield enabled border width

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 StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: Padding(
      padding: const EdgeInsets.all(20),
      child: TextField(
        decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide( width: 3))),
      ),
    ))));
  }
}

Conclusion

To conclude this tutorial, hope you now have a detailed practical knowledge of how to customize Flutter textfield enabled border width. 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.