How To Change Flutter Textformfield Enabled Border Color [Easy Flutter Code Guide]

flutter textformfield enabled border color

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

Introduction: Flutter Textformfield Enabled Border Color

Enabled border is the border that is shown when the textformfield is not focused. Let’s first see its default color and after that, we’ll customize it practically.

Default Enabled Border Color

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

TextFormField()

flutter textformfield enabled border default color

The above image shows the default Flutter textformfield enabled border color. Let’s now see how to customize its color.

Customizing Flutter Textformfield Enabled Border Color

  • In order to do that, we’ve to use the decoration constructor of textformfield 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 color.
  • Finally, we’ve to use the border side constructor of underline input border and pass it border side widget and then by using its color constructor, we can easily pass it any color of our choice. For demonstration, we’ve passed it a green color.
  • Also, we’ve increased the height of border using the width constructor of border side class so the color change will look more visible. See below code:
TextFormField(
        decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                     color: Colors.green, 
                     width: 2))),
      )

flutter textformfield enabled border color

As we can see that Flutter textformfield enabled border color is successfully customized.

See below code if you want to change the outline border color of textformfield.

TextFormField(
      decoration: InputDecoration(
          enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(
                   color: Colors.green, 
                   width: 2))),
      )

flutter textformfield enabled underline border color

So this is how we can easily change Flutter textformfield enabled border color.

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

Custom Flutter Textformfield Enabled Border Color Source Code

flutter textformfield enabled border color

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: TextFormField(
        decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.green, width: 2))),
      ),
    ))));
  }
}

Conclusion

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