无法在错误边框TextFormField Flutter中填充颜色

Posted 2021-05-07

我正在尝试实现这一目标，但是无法自定义错误边框，errorBorder无法选择填充它，

这是我的TexFormField和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 ); 

答案

我认为唯一的方法是提供自定义逻辑并设置其他修饰，以防万一或出现错误。我编写了一些代码，也许可以帮上忙；如果您将该字段留空并按提交，您将在文本字段中用红色填充：

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'),
            ),
          ),
        ],
      ),
    );
  }
}