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.
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", ), ), ),
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With