[英]Unable to Fill color in Error Border TextFormField Flutter
I am trying to achieve this, but no way to customise Error Border, errorBorder has no option to make it fill,我正在尝试实现这一点,但无法自定义错误边框,errorBorder 无法使其填充,
here is my TexFormField and InputDecoration:这是我的 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 );
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'),
),
),
],
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.