内容为空时更改textformfield装饰答案

【问题标题】：Change the textformfield decoration when the content is empty内容为空时更改textformfield装饰
【发布时间】：2020-10-12 08:04:34
【问题描述】：

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

这是代码

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;
}
}

【问题讨论】：

标签： flutter user-interface dart text-decorations textformfield

【解决方案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;
        });
      },
    );
  }
}

【讨论】：