Flutter: Not able to clear text field with .clear or .text =""

Question

I have created a feedback screen but I am unable to clear the text from my rounded input field even after using

controller.clear or controller.text =""

My feedback screen code(only attaching relevant code to make it easy to understand):

class _FeedbackBodyState extends State<FeedbackBody> {
  var _enteredMessage = '';

  final _controller = new TextEditingController();
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    void _sendMessage() async {
      
      FocusScope.of(context).unfocus();

      await FirebaseFirestore.instance.collection('chat').add({
        'text': _enteredMessage,
      });
      _controller.clear();
      //_controller.text = "";
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Feedback submitted')));
    }

    return Scaffold(
      body: FeedbackBackground(
          child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            

            RoundedInputField(
              hintText: "Send a message",
              onChanged: (value) {
                setState(() {
                  _enteredMessage = value;
                });
              },
            ),
            Container(
                margin: EdgeInsets.symmetric(vertical: 10),
                padding: EdgeInsets.symmetric(horizontal: 40),
                child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: kPrimaryColor, // background
                      
                    ),
                    onPressed:
                        _enteredMessage.trim().isEmpty ? null : _sendMessage,
                    child: Text('Send Feedback'))),
            
          ],
        ),
      )),
    );
  }
}

Code for rounded input field:

class RoundedInputField extends StatelessWidget {
  final String hintText;
  final IconData icon;
  final ValueChanged<String> onChanged;
  const RoundedInputField(
      {Key? key,
      required this.hintText,
      this.icon = Icons.person,
      required this.onChanged})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFieldContainer(
      child: TextField(
        
        onChanged: onChanged,
        decoration: InputDecoration(
            icon: Icon(
              icon,
              color: kPrimaryColor,
            ),
            hintText: "Send a message",
            border: InputBorder.none),
      ),
    );
  }
}

The submit button should have cleared the field by doing controller.clear but I am not sure how it did not work

Thanks for your help in advance

What's RoundedInputField(). I mean are you using package or custom text field. And if it's custom then please share code. — Rohan Jariwala, Jan 16 '23 at 14:17

score 2 · Accepted Answer · answered Jan 16 '23 at 15:38

2

Use controller in TextField.

final TextEditingController _controller = TextEditingController();

TextField(
  controller: _controller,
...
)

answered Jan 16 '23 at 15:38

user18309290

5,777
2
4
22

krishnaacharyaa · Answer 2 · 2023-01-17T08:13:24.620

1

You have declared the _controller but never used.

final TextEditingController _controller = TextEditingController();

TextField(
  controller: _controller, Use it here
...
)

edited Jan 17 '23 at 08:13

answered Jan 16 '23 at 14:23

krishnaacharyaa

14,953
4
49
88

No It didn't work tried both setState((){ _controller.text = ""; }); and setState((){ _controller.clear; }); – Arkham007 Jan 16 '23 at 18:53

score 1 · Answer 3 · answered Jan 16 '23 at 19:17

You are not passing the controller to the textfield widget so it is not working. The code should be as follows:

class RoundedInputField extends StatelessWidget {
  final String hintText;
  final TextEditingController controller;
  final IconData icon;
  final ValueChanged<String> onChanged;
  const RoundedInputField(
      {Key? key,
      required this.hintText,
      required this.controller,
      this.icon = Icons.person,
      required this.onChanged})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFieldContainer(
      child: TextField(
        controller: controller,
        onChanged: onChanged,
        decoration: InputDecoration(
            icon: Icon(
              icon,
              color: kPrimaryColor,
            ),
            hintText: "Send a message",
            border: InputBorder.none),
      ),
    );
  }
}

now pass the controller from the feedback screen,

class _FeedbackBodyState extends State<FeedbackBody> {
  var _enteredMessage = '';

  final _controller = new TextEditingController();
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    void _sendMessage() async {
      
      FocusScope.of(context).unfocus();

      await FirebaseFirestore.instance.collection('chat').add({
        'text': _enteredMessage,
      });
      _controller.clear();
      //_controller.text = "";
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Feedback submitted')));
    }

    return Scaffold(
      body: FeedbackBackground(
          child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            

            RoundedInputField(
              controller: _controller,
              hintText: "Send a message",
              onChanged: (value) {
                setState(() {
                  _enteredMessage = value;
                });
              },
            ),
            Container(
                margin: EdgeInsets.symmetric(vertical: 10),
                padding: EdgeInsets.symmetric(horizontal: 40),
                child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: kPrimaryColor, // background
                      
                    ),
                    onPressed:
                        _enteredMessage.trim().isEmpty ? null : _sendMessage,
                    child: Text('Send Feedback'))),
            
          ],
        ),
      )),
    );
  }
}

Flutter: Not able to clear text field with .clear or .text =""

3 Answers3