内容为空时更改textformfield装饰

Question

我想实现一个设计，但不知道如何去做。就像图片中的那样，当用户 select 字段颜色发生变化时。我更改文本字段的颜色以验证文本字段是否聚焦。但是我怎么知道如果文本字段为空然后更改边框的颜色以及内容未聚焦的颜色？附上设计图。

这是代码

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, 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, 255, 1);
}
//   Color _getAppBarBackgroundColor() {
//     return _focusNode.hasFocus ? Colors.green : Colors.red;
//   }
Color _getInputTextColor() {
return _focusNode.hasFocus ? Colors.white : Colors.pink;
}
}

Answer 1

您可以只在 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;
        });
      },
    );
  }
}

内容为空时更改textformfield装饰

Change the textformfield decoration when the content is empty

user-interface

text-decorations

dart

flutter

textformfield