Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the default border color of TextFormField in FLUTTER

Unable to change the default border color when TextFormField is not active. When TextFormField is not active this shows DarkGrey-Border color. So, how to change that.

enter image description here

Theme(               data: new ThemeData(                 primaryColor: Colors.red,                 primaryColorDark: Colors.black,               ),               child: TextFormField(                 decoration: new InputDecoration(                   labelText: "Enter Email",                   fillColor: Colors.white,                   border: new OutlineInputBorder(                     borderRadius: new BorderRadius.circular(25.0),                     borderSide: new BorderSide(),                   ),                   //fillColor: Colors.green                 ),                 validator: (val) {                   if (val.length == 0) {                     return "Email cannot be empty";                   } else {                     return null;                   }                 },                 keyboardType: TextInputType.emailAddress,                 style: new TextStyle(                   fontFamily: "Poppins",                 ),               ),             ), 
like image 310
jazzbpn Avatar asked Jun 24 '19 05:06

jazzbpn


People also ask

How do you change the border color in Flutter?

You can change the TextField border color globally by defining the inputDecorationTheme and then adding the OutlineInputBorder widget. Inside the OutlineInputBorder widget, you can specify which type of border you want to change. for example, enabledBorder , focusedBorder , and so on, and then assign the color.

How do you use TextField in Flutter?

In Flutter, this can be done using TextEditingController . First, create a TextEditingController and set it as a controller property of your TextField widget. In this example, I have added an extra Button and Text widget which will show the added text when you click the “Show Text” button.

How do you style TextFormField in Flutter?

Style Input Text in TextFormField In Flutter To give the style of user input text like fontSize, textColor, fontWeight and many other styles. Use the style component inside the TextFormField as below. There are many input text style properties that you can use to style.


Video Answer


1 Answers

Use enabledBorder of the InputDecoration, don't forget you can also use the focusedBorder, like this :

InputDecoration(                 labelText: "Enter Email",                 fillColor: Colors.white,                 focusedBorder: OutlineInputBorder(                   borderRadius: BorderRadius.circular(25.0),                   borderSide: BorderSide(                     color: Colors.blue,                   ),                 ),                 enabledBorder: OutlineInputBorder(                   borderRadius: BorderRadius.circular(25.0),                   borderSide: BorderSide(                     color: Colors.red,                     width: 2.0,                   ),                 ), ) 

Here you have more info: https://api.flutter.dev/flutter/material/InputDecoration/enabledBorder.html

like image 98
diegoveloper Avatar answered Sep 19 '22 17:09

diegoveloper