How to Change TextField Border Width, Radius and Border Color in Flutter

In this example, we are going to show you the easiest way to change border widget, radius, and border color of TextField widget in Flutter. There may be many text field in the form, use the example below to style border of TextField with less code.

OutlineInputBorder myinputborder(){ //return type is OutlineInputBorder
  return OutlineInputBorder( //Outline border type for TextFeild
    borderRadius: BorderRadius.all(Radius.circular(20)),
    borderSide: BorderSide(
        color:Colors.redAccent,
        width: 3,
      )
  );
}

OutlineInputBorder myfocusborder(){
  return OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(20)),
    borderSide: BorderSide(
        color:Colors.greenAccent,
        width: 3,
      )
  );
}

//create a function like this so that you can use it wherever you want multiple times

TextField( 
  decoration: InputDecoration( 
      labelText: "Username",
      border: myinputborder(), //normal border
      enabledBorder: myinputborder(), //enabled border
      focusedBorder: myfocusborder(), //focused border
      // set more border style like disabledBorder
  )
),

TextField( 
  decoration: InputDecoration( 
      labelText: "Password",
      enabledBorder: myinputborder(),
      focusedBorder: myfocusborder(),
  )
))

Full Code Example:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  TextEditingController username = TextEditingController();
  TextEditingController password = TextEditingController();
  @override
  void initState() {
    username.text = ""; //innitail value of text field
    password.text = "";
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Icons on TextField"),
             backgroundColor: Colors.deepOrangeAccent,
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            child: Column( 
              children: [
                TextField( 
                  controller: username,
                  decoration: InputDecoration( 
                      labelText: "Username",
                      prefixIcon: Icon(Icons.people),
                      border: myinputborder(),
                      enabledBorder: myinputborder(),
                      focusedBorder: myfocusborder(),
                  )
                ),

                Container(height:20),

                TextField( 
                  controller: password,
                  decoration: InputDecoration( 
                      prefixIcon: Icon(Icons.lock),
                      labelText: "Password",
                      enabledBorder: myinputborder(),
                      focusedBorder: myfocusborder(),
                  )
                ),

              ],
            ),
          )
       );
  }

  OutlineInputBorder myinputborder(){ //return type is OutlineInputBorder
    return OutlineInputBorder( //Outline border type for TextFeild
      borderRadius: BorderRadius.all(Radius.circular(20)),
      borderSide: BorderSide(
          color:Colors.redAccent,
          width: 3,
        )
    );
  }

  OutlineInputBorder myfocusborder(){
    return OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(20)),
      borderSide: BorderSide(
          color:Colors.greenAccent,
          width: 3,
        )
    );
  }

  //create a function like this so that you can use it wherever you want
}

Output Screenshot:

In this way, you can set Border size, border radius, and border color on TextField widget of Flutter. For comprehensive input decoration options, explore TextField hints and styling and setting icons on TextFields.