Flutter - Customize TextField or TextFormField Border

In flutter, TextField or TextFormField is a very useful widget, that allows users to collect various types of information such as email, password, phone, and address from the keyboard into an app. But after adding the default TextField/TextFormField, sometimes you might need to customize the border of TextField/TextFormField. So I would like to share with you how to customize TextField/TextFormField border in Flutter.

How to add a border to a TextField or TextFormField in Flutter :

We can add a border using the decoration property and then use the InputDecoration and OutlineInputBorder widgets. The OutlineInputBorder widget has the borderSide widget which you can use to pass in the BorderSide widget with width and color parameters to create the border.

Example :

We can use the same code for TextFormField.

   TextField(
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      width: 2, color: Colors.yellow),
                ),
              ),
            )

How to add border-radius or rounded border to TextField or TextFormField :

We can easily add a rounded border in TextField or TextFormField help of the decoration property and then use the OutlineInputBorder widget. We can use the same code for TextFormField.

Example :

  TextField(
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide:
                  BorderSide(width: 2, color: Colors.yellow), 
                  borderRadius: BorderRadius.circular(40.0),
                ),
              ),
            )

Show TextField or TextFormField error border : 

We can show an error border when validating input by a user, Using the decoration property and the OutlineInputBorder widget. We can use the same code for TextFormField.

Example :

  TextField(
              decoration: InputDecoration(
                errorBorder: OutlineInputBorder( 
                  borderSide: BorderSide(
                      width: 2, color: Colors.redAccent),
                ),
              ),
            )

 

Show TextField or TextFormField focus border :

We can add a focus border using the decoration property and the OutlineInputBorder widget. We can use the same code for TextFormField.

Example :

TextField(
  decoration: InputDecoration(
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
          width: 2, color: Colors.blueAccent), 
    ),
  ),
)

 

Change border width or size TextField or TextFormField :

We can also change the width of TextField or TextFormField help of the decoration property and the OutlineInputBorder widget. We can use the same code for TextFormField.

Example :

TextField(
  decoration: InputDecoration(
    enabledBorder: OutlineInputBorder(
      borderSide:
          BorderSide(
          width: 7, //Change here
          color: Colors.blue,),
      borderRadius: BorderRadius.circular(30.0),
    ),
  ),
),

 

Full code :

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Errorgram",style:TextStyle(color:Colors.black),),//Change color here
      ),
      body: Container(
        margin: EdgeInsets.only(left: 10,right: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      width: 2, color: Colors.yellow),
                ),
              ),
            ),
            TextField(
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide:
                  BorderSide(width: 2, color: Colors.yellow),
                  borderRadius: BorderRadius.circular(40.0),
                ),
              ),
            ),
            TextField(
              decoration: InputDecoration(
                errorBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      width: 2, color: Colors.redAccent),
                ),
              ),
            ),
            TextField(
              decoration: InputDecoration(
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      width: 2, color: Colors.blueAccent),
                ),
              ),
            ),
            TextField(
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide:
                  BorderSide(
                    width: 7, //Change here
                    color: Colors.blue,),
                  borderRadius: BorderRadius.circular(30.0),
                ),
              ),
            ),
          ],
        ),
      ),

    );
  }
}

I hope it can help you...

Tags: