CODEWITHSUNDEEP
flutterdart
x98
x98

Reputation: 111

How to change background color of TextFormField on error

I am making a Login Form and on error i want to change the color of my TextFormField. Currently I am using Bloc Architecture and State management.

Here is a picture of how I want the text field on error.

enter image description here

Upvotes: 0

Views: 8575

Answers (3)

Behzod Faiziev
Behzod Faiziev

Reputation: 445

This example might be helpful:

  TextFormField(
  decoration: InputDecoration(
  errorStyle: TextStyle(
  color: Colors.white,
           )
      ),
  ),

Upvotes: 0

Amit
Amit

Reputation: 546

create a method in util class and call that method as mention below

textFormField(
        color: Colors.white,
        hintText: "User Name",
        radius: 50,
        onSave: (String value) {
          _loginData.email = value;
        },
        validator: FormValidator().validateEmail,
    prefixIcon: Padding(
      padding: EdgeInsets.all(0.0),
      child: Icon(
        Icons.person,
        color: Colors.grey,
      ), // icon is 48px widget.
    ),suffixIcon: null,obscureText: false),

textFormField({
  Color color,
  String hintText,
  double radius,
    dynamic validator,
    Function onSave,
    dynamic prefixIcon,
    dynamic suffixIcon,
    bool obscureText,
  }) {
    return new TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
obscureText: obscureText,
decoration: InputDecoration(
  hintText: hintText,
  errorText: "",
  fillColor: color,
  filled: true,
  contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
  focusedErrorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      borderSide: BorderSide(color: color, width: 0)),
  focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      borderSide: BorderSide(color: color, width: 0)),
  enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      borderSide: BorderSide(color: color, width: 0)),
  errorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      borderSide: BorderSide(color: color, width: 0)),
  disabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      borderSide: BorderSide(color: color, width: 0)),
  border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      borderSide: BorderSide(color: color, width: 0)),
  prefixIcon: prefixIcon,
  suffixIcon: suffixIcon,
),
validator: validator,
// validator: FormValidator().validateEmail,
onSaved:
    onSave, /*onSaved: (String value) {
  _loginData.email = value;
    },*/
  );
 }

Upvotes: 0

Firas BENMBAREK
Firas BENMBAREK

Reputation: 310

Simply use text validation and test on it.

Here's a generic example :

class MyHomePageState extends State<MyHomePage> {
  final _text = TextEditingController();
  bool _validate = false;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Textfield validation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('form cant be empty'),
            TextField(
              controller: _text,
              decoration: InputDecoration(
                filled: _validate,
                fillColor: Colors.red,
                labelText: 'Enter the Value',
                errorText: _validate ? 'Value Can\'t Be Empty' : null,
              ),
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  _text.text.isEmpty ? _validate = true : _validate = false;
                });
              },
              child: Text('Submit'),
              textColor: Colors.white,
              color: Colors.blueAccent,
            )
          ],
        ),
      ),
    );
  }
}

Here's a codepen demo for it

Upvotes: 4

Related Questions