Question 77664 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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

Tags:

3

Answers


  1. 0

    You have declared the _controller but never used.

    final TextEditingController _controller = TextEditingController();

TextField(
  controller: _controller,👈 Use it here
...
)
    Login or Signup to reply.
  2. 0

    Use controller in TextField.

    final TextEditingController _controller = TextEditingController();

TextField(
  controller: _controller,
...
)
    Login or Signup to reply.
  3. 0

    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'))),
            
          ],
        ),
      )),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search