Issue
I have 2 issues:
- the screen is getting rebuilt every time I type something, it was working fine, and not sure what happened!
- when I click send, a message will be sent even if the
TextFieldis empty. It basically sends the last message. The text is being cleared but still getting sent.
here is my code
class ChatGroupLayout extends StatefulWidget {
const ChatGroupLayout({Key? key}) : super(key: key);
@override
State<ChatGroupLayout> createState() => _ChatGroupLayoutState();
}
class _ChatGroupLayoutState extends State<ChatGroupLayout> {
final fieldText = TextEditingController();
void clearText() {
fieldText.clear();
}
var _enterdMessage;
void _sendMessage() async {
final user = await FirebaseAuth.instance.currentUser;
final userData = await FirebaseFirestore.instance
.collection('users')
.doc(user?.uid)
.get();
FirebaseFirestore.instance
.collection('groupsChat')
.doc('groupsChat')
.collection('P1HSu0cjsQSyIKZ7ZiX6a74rwzU2')
.add({
'text': _enterdMessage.trim(),
'time': Timestamp.now(),
'userid': user?.uid,
'displayname': userData['displayname']
});
clearText();
}
static final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.grey.shade700,
appBar: AppBar(
backgroundColor: Colors.black,
title: ListTile(
onTap: () => showBarModalBottomSheet(
context: context,
builder: (context) => const GroupDetailsScreen()),
tileColor: Colors.black,
title: const Center(child: Text('Group Chat')),
subtitle: const Center(child: Text('323 in this Group')),
),
actions: [
IconButton(
onPressed: () {}, icon: const Icon(Icons.favorite_border)),
IconButton(
onPressed: () {},
icon: const Icon(Icons.exit_to_app),
),
],
),
body: Column(
children: [
Expanded(
child: ChatGroupScreen(),
),
Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 6, bottom: 6, right: 0, top: 5),
child: TextField(
key: _formKey,
controller: fieldText,
onChanged: (value) {
setState(() {
_enterdMessage = value;
});
},
decoration: InputDecoration(
prefixIcon: IconButton(
icon: const Icon(
Icons.emoji_emotions_outlined,
color: Colors.white,
),
onPressed: () {},
),
suffixIcon: IconButton(
icon: const Icon(
Icons.attach_file,
color: Colors.white,
),
onPressed: () {},
),
filled: true,
fillColor: Colors.black,
hintText: 'type a message',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: const BorderSide(
width: 0,
style: BorderStyle.none,
),
),
contentPadding: EdgeInsets.all(20),
),
),
),
),
IconButton(
icon: Icon(Icons.send),
onPressed: () {
if (_enterdMessage.trim().isEmpty) {
return null;
} else {
_sendMessage();
clearText();
}
}),
],
),
],
//TextInput
),
),
);
}
}
Solution
So what you need to do: Completely remove the onChanged property of the textField. It is not needed. You can get the current text in the textField from its controller. And in the onPressed function of the icon button check if controller.text is not equal to "" and if yes call the _sendMessage function.
updatedCode:
class ChatGroupLayout extends StatefulWidget {
const ChatGroupLayout({Key? key}) : super(key: key);
@override
State<ChatGroupLayout> createState() => _ChatGroupLayoutState();
}
class _ChatGroupLayoutState extends State<ChatGroupLayout> {
final fieldText = TextEditingController();
void clearText() {
fieldText.clear();
}
void _sendMessage() async {
final user = await FirebaseAuth.instance.currentUser;
final userData = await FirebaseFirestore.instance
.collection('users')
.doc(user?.uid)
.get();
FirebaseFirestore.instance
.collection('groupsChat')
.doc('groupsChat')
.collection('P1HSu0cjsQSyIKZ7ZiX6a74rwzU2')
.add({
'text': fieldText.text.trim(),
'time': Timestamp.now(),
'userid': user?.uid,
'displayname': userData['displayname']
});
}
static final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.grey.shade700,
appBar: AppBar(
backgroundColor: Colors.black,
title: ListTile(
onTap: () => showBarModalBottomSheet(
context: context,
builder: (context) => const GroupDetailsScreen()),
tileColor: Colors.black,
title: const Center(child: Text('Group Chat')),
subtitle: const Center(child: Text('323 in this Group')),
),
actions: [
IconButton(
onPressed: () {}, icon: const Icon(Icons.favorite_border)),
IconButton(
onPressed: () {},
icon: const Icon(Icons.exit_to_app),
),
],
),
body: Column(
children: [
Expanded(
child: ChatGroupScreen(),
),
Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 6, bottom: 6, right: 0, top: 5),
child: TextField(
key: _formKey,
controller: fieldText,
decoration: InputDecoration(
prefixIcon: IconButton(
icon: const Icon(
Icons.emoji_emotions_outlined,
color: Colors.white,
),
onPressed: () {},
),
suffixIcon: IconButton(
icon: const Icon(
Icons.attach_file,
color: Colors.white,
),
onPressed: () {},
),
filled: true,
fillColor: Colors.black,
hintText: 'type a message',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: const BorderSide(
width: 0,
style: BorderStyle.none,
),
),
contentPadding: EdgeInsets.all(20),
),
),
),
),
IconButton(
icon: Icon(Icons.send),
onPressed: () {
if (fieldText.text != "") {
_sendMessage();
clearText();
}
}),
],
),
],
//TextInput
),
),
);
}
}
Answered By – TheUltimateOptimist
Answer Checked By – Katrina (FlutterFixes Volunteer)