内容为空时更改textformfield装饰

如何解决内容为空时更改textformfield装饰

我想实现一个设计，但是对如何执行设计一无所知。就像图片中用户选择字段时一样，其颜色也会改变。我更改了文本字段的颜色，以验证文本字段是否聚焦。但是我怎么知道，如果文本字段为空，则更改边框的颜色以及内容未聚焦的颜色？ 设计已附上。

这是代码

class EditMneomic extends StatefulWidget {
@override
_EditMneomicState createState() => _EditMneomicState();
}
class _EditMneomicState extends State<EditMneomic> {
FocusNode _focusNode;
TextEditingController _controller;
final _formKey = GlobalKey<FormState>();
@override
void dispose() {
super.dispose();
_focusNode.dispose();
}
@override
void initState() {
super.initState();
// if (_formKey.currentState.validate() == null)
_focusNode = new FocusNode();
_focusNode.addListener(_onOnFocusNodeEvent);
}
_onOnFocusNodeEvent() {
setState(() {
// Re-renders
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Changing Colors'),),body: new Container(
//         height: 50,//         width: double.infinity,decoration: Boxdecoration(
borderRadius: BorderRadius.all(
Radius.circular(20),color: _getContainerBackgroundColor(),// padding: new EdgeInsets.all(40.0),child: Form(
key: _formKey,autovalidate: true,child: new TextFormField(
// onEditingComplete: () {
//   print('true');
// },// autovalidate: true,// validator: (value) {
//   // if(value.isEmpty){}
//   if (value.isEmpty) {
//     return 'Please enter some text';
//   }
//   return null;
//   // if (_controller.text == "") {
//   //   _getContainerBackgroundColor();
//   // } else {
//   //   return null;
//   // }
// },decoration: Inputdecoration(
prefixIcon: Padding(
padding: const EdgeInsets.all(8.0),child: Container(
decoration: Boxdecoration(
color: Color.fromrGBO(255,255,1),borderRadius: BorderRadius.all(
Radius.circular(10.0),child: Text(
'1',textAlign: TextAlign.center,errorBorder: OutlineInputBorder(
// gapPadding: 10,borderSide: BorderSide(
color: Colors.white,filled: true,// focusedBorder: OutlineInputBorder(
//     borderSide: BorderSide(color: Colors.red),//     borderRadius: BorderRadius.circular(20)),// border: OutlineInputBorder(
//   borderRadius: const BorderRadius.all(
//     const Radius.circular(25.0),//   ),// ),// style: new TextStyle(color: _getInputTextColor()),focusNode: _focusNode,)),);
}
Color _getContainerBackgroundColor() {
return _focusNode.hasFocus
? Color.fromrGBO(233,238,249,1)
: Color.fromrGBO(0,85,1);
}
//   Color _getAppBarBackgroundColor() {
//     return _focusNode.hasFocus ? Colors.green : Colors.red;
//   }
Color _getInputTextColor() {
return _focusNode.hasFocus ? Colors.white : Colors.pink;
}
}

解决方法

您可以在TextFormField中仅具有onChanged侦听器，以侦听文本输入并相应地设置布尔值。 另外，这与解决方案无关，您需要初始化TextEditingController并将其连接到TextFormField。 示例：

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  TextEditingController _controller;

  // Use this flag in your _getContainerBackgroundColor or directly in your build method
  bool textFieldIsEmpty = true;

  @override
  void initState() {
    _controller = TextEditingController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: _controller,onChanged: (String text) {
        setState(() {
          textFieldIsEmpty = text.isEmpty;
        });
      },);
  }
}