Change the textformfield decoration when the content is empty

Question

I want to implement a design but did not get a grip on how to do it. Like in the picture when the user select the field it colors changes. I change the color of the text field to verify if the text field is focussed or not. but how can i know that if the text field is empty then change the color of the border also the content unfocus color? The design is attached.

This is the code

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

You could just have a onChanged listener in your TextFormField that listens to the text input and sets a bool accordingly. Also, and this has nothing to do with the solution, you need to initialize your TextEditingController and hook it up to your TextFormField. Example:

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