Flutter Change TextField Underline Color on Focus

TextField works on 2 functionalities in flutter, First is without Focus and other is on Focus. We will handle TextField layout on both of these events. We will change TextField underline default color and also change color on focus. TextField has a propery enabledBorder to show border on default state and focusedBorder which update border UI when user select TextField.

Flutter Change TextField Underline Color on Focus

1. Creating TextField widget and defining focusedBorder and enabledBorder properties.

TextField(
	autocorrect: true,
	decoration: InputDecoration(
	  hintText: 'Enter Text',
	  enabledBorder: UnderlineInputBorder(
		borderSide: BorderSide(color: Colors.pink),
	  ),
	  focusedBorder: UnderlineInputBorder(
		borderSide: BorderSide(color: Colors.teal),
	  ),
	))

Screenshot without Focus:

Screenshot with Focus:

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        home: Scaffold(
            body: Center(
                child: SizedBox(
                    width: 280,
                    child: TextField(
                        autocorrect: true,
                        decoration: InputDecoration(
                          hintText: 'Enter Text',
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.pink),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.teal),
                          ),
                        ))))));
  }
}