Unable to Fill color in Error Border TextFormField Flutter

Question

I am trying to achieve this, but no way to customise Error Border, errorBorder has no option to make it fill ,

here is my TexFormField and InputDecoration :

     TextFormField(
        controller: TextEditingController(),
        style: Theme.of(context).textTheme.subtitle2,
        decoration: CustomDecoration.inputFilledDecoration(context, hint),
        onSaved: onSaved,
        validator: isRequired ? _exists : null),);



    InputDecoration inputFilledDecoration(BuildContext context, String hint) => 
         InputDecoration(
      border: InputBorder.none,
      contentPadding: EdgeInsets.symmetric(horizontal: PaddingMetric.inputHorizontal, 
      vertical: PaddingMetric.inputVertical),
      disabledBorder: InputBorder.none,
      enabledBorder: InputBorder.none,
      fillColor: Theme.of(context).dividerColor,
      filled: true,
      focusedBorder: OutlineInputBorder(borderSide: BorderSide(width: 1)),
  isDense: false,
  labelText: hint ); 

Answer 1

I think the only way would be to provide a custom logic and set a different decoration in case it is ok or there is an error. I have made a little code, maybe it can help; if you leave the field empty and press submit, you will get filled red in the textfield:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() => MyCustomFormState();
}

class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  bool isError = false;

  InputDecoration ok(BuildContext context, String hint) => 
         InputDecoration(
      border: InputBorder.none,
      disabledBorder: InputBorder.none,
      enabledBorder: InputBorder.none,
      fillColor: Colors.green,
      filled: true,
      focusedBorder: OutlineInputBorder(borderSide: BorderSide(width: 1)),
  isDense: false,
  labelText: hint ); 

  InputDecoration err(BuildContext context, String hint) => 
         InputDecoration(
      border: InputBorder.none,
      disabledBorder: InputBorder.none,
      enabledBorder: InputBorder.none,
      fillColor: Colors.red,
      filled: true,
      focusedBorder: OutlineInputBorder(borderSide: BorderSide(width: 1)),
  isDense: false,
  labelText: hint ); 

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            decoration: isError ? err(context,"err") : ok(context,"ok"),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false
                // otherwise.
                if (_formKey.currentState.validate()) {
                  setState(() { isError = false; });
                }
                else {
                  setState(() { isError = true; });
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}