How To Change Flutter Textformfield Focused Outline Border Color

In this tutorial, we’ll learn how to properly change Flutter textformfield focused outline border color by using a practical Flutter code example.

Introduction: Flutter Textformfield Focused Outline Border Color

Focused border of textformfield is shown when the textformfield is focused/tapped. When we use outline border then it covers all the border sides of the textformfield.

Don’t worry, I will now implement it using proper example so you can have a better idea of what outline border is and how can we change Flutter textformfield focused outline border color.

Default Focused Outline Border Color

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

TextFormField(
           decoration: InputDecoration(
                  focusedBorder: OutlineInputBorder()
                ),
              )

focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.green))

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(
                          focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.green))),
                    )))));
  }
}