TextEditingController doesn't clear the text after .clear() - firebase

Question

So im trying to clear the textform after sending a message and if the message is empty the send button should be disabled , what i'm having is the onPressed for the button is never null , it's never disabled , and the text is cleared but if i send again it sends the previous text before clearing if that makes sense
so if i send Hello , it shows as empty but the button still active , if i resend again without entering anything it sends the same cleared text , any idea what i could be doing wrong ?
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class NewMessage extends StatefulWidget {
#override
_NewMessageState createState() => _NewMessageState();
}
class _NewMessageState extends State<NewMessage> {
final _controller = TextEditingController();
String _enteredMessage = '';
void _sendMessage() async {
setState(() {
_controller.clear();
});
FocusScope.of(context).unfocus();
final user = FirebaseAuth.instance.currentUser;
final userData = await FirebaseFirestore.instance
.collection('users')
.doc(user.uid)
.get();
FirebaseFirestore.instance.collection('chat').add({
'text': _enteredMessage,
'createdAt': Timestamp.now(),
'userId': user.uid,
'username': userData['username'],
});
}
void sayHello() {
print('hello');
}
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 8),
padding: EdgeInsets.all(8),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: InputDecoration(labelText: 'Send a message...'),
onChanged: (value) {
setState(() {
_enteredMessage = value;
});
},
),
),
IconButton(
icon: Icon(Icons.send, color: Theme.of(context).primaryColor),
onPressed: _enteredMessage.trim().isEmpty ? null : _sendMessage,
)
],
),
);
}
}

Answer 1

Problem
The reason you are having the error is that you are storing in the input in the enteredText variable but are clearing the controller's text, both of which are different. Which is why your enteredText still holds and send the same string after clearing.
Solution
You don't have to use a separate variable to hold your input text if you have given a controller. The controller already holds the value of the input. Make the following changes:
IconButton(
...,
onPressed: (){
_controller.text = _controller.text.trim();
if(_controller.text.isNotEmpty) {
_sendMessage();
}
}
)
Use the text from _controller with _controller.text
void _sendMessage() async {
FocusScope.of(context).unfocus();
final user = FirebaseAuth.instance.currentUser;
final userData = await FirebaseFirestore.instance
.collection('users')
.doc(user.uid)
.get();
FirebaseFirestore.instance.collection('chat').add({
'text': _controller.text, //<-- Update here
'createdAt': Timestamp.now(),
'userId': user.uid,
'username': userData['username'],
});
setState(() { //<-- Clear at the end
_controller.clear();
});
}
Finally
You can now get rid of the enteredText variable and the onChange callback.