How to Change TextField Border Color in Flutter

I already have a blog post on how to add borders to TextField using OutlineInputBorder class. In this blog post, let’s check how to change the default color of TextField border in Flutter.

You can change the border color of your TextField using InputDecoration class, OutlineInputBorder class, and BorderSide class. See the code snippet given below.

TextField(
          decoration: InputDecoration(
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.blue, width: 2.0),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.green, width: 2.0),
                ),
               hintText: 'Enter your name',
              ),
            ),

The border color is different for different states. When the TextField is focused, the green border color changes to red. Following is the complete example.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TextInput Border Color Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatefulWidget {
  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  final myController = TextEditingController();

  @override
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TextField Border Color'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Center(
            child: TextField(
              decoration: InputDecoration(
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.blue, width: 2.0),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.green, width: 2.0),
                ),
                hintText: 'Enter your name',
              ),
              controller: myController,
            ),
          ),
        ));
  }
}

Following is the output.

That’s how you change the border color of TextField in Flutter.