Refactoring of TextField/TextFormField in Flutter - flutter

Question

Can we refactor TextField/TextFormField in Flutter without rebuilding the Widget?
I tried to refactor the TextField Widget for a form that I have created to collect some data. But, when I dismiss my keyboard, the data is losing because the widget is rebuilding. Is there any way to fix it? Pls, Let me know...
See the code below of the Refactored TextField
import 'package:flutter/material.dart';
class ContentInputWidget extends StatelessWidget {
const ContentInputWidget({
Key? key,
required this.text,
required this.controller,
this.keyboardType = TextInputType.text,
}) : super(key: key);
final String text;
final TextInputType keyboardType;
final TextEditingController controller;
#override
Widget build(BuildContext context) {
print('Content Input Widget Rebuild');
return TextField(
decoration: InputDecoration(
labelText: text,
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
),
controller: controller,
keyboardType: keyboardType,
maxLines: null,
);
}
}
I've used Provider and Consumer to get the data from the text field. And I got it by using a Providers Model Class
See below
class ContentUpdater extends ChangeNotifier {
String description = 'Description comes here';
String name = 'Name';
String prayerRequest = 'Request Comes here';
String postDate = '01-01-2022';
void updatePoster(
String nameText,
String descriptionText,
String prayerReqText,
String postDtText,
) {
name = nameText;
description = descriptionText;
prayerRequest = prayerReqText;
postDate = postDtText;
notifyListeners();
}
}
Called a Function to Update Content using Provider
() { Provider.of<ContentUpdater>(context, listen: false)
.updatePoster(
nameController.text.toString(),
descriptionController.text.toString(),
requestController.text.toString(),
dateController.text.toString(),
);
}
This all works well. But the problem comes if we dismiss the keyboard by clicking the back button, the content disappears from the TextField ...
Is there any way to do without using a StateFulWidget

Answer 1

You can set up your TextFieldController using flutter_hooks (useTextEditingController). This will make it so the state of the TextEditingController isn't lost on rebuilds.
TextEditingController controller = useTextEditingController();

Answer 2

I had a similar problem a long time ago. I don't remember exactly how I made it work, but you could try adding a onChanged function to your TextField and save the data before the re-build clears the text.
final String myText;
void _onChanged() {
if (controller.text != null && controller.text != "") {
myText = controller.text;
}
}
#override
Widget build(BuildContext context) {
print('Content Input Widget Rebuild');
return TextField(
onChanged: _onChanged,
decoration: InputDecoration(
labelText: text,
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
),
controller: controller,
keyboardType: keyboardType,
maxLines: null,
);
}

Answer 3

The problem is probably there because the controller is inside the stateless widget. When the state is changed, controller dies and gets rebuilt. Try wrapping widget inside a stateful widget and maybe it'll solve your issue.
import 'package:flutter/material.dart';
class ContentInputWidget extends StatefulWidget {
const ContentInputWidget({
Key? key,
required this.text,
required this.controller,
this.keyboardType = TextInputType.text,
}) : super(key: key);
final String text;
final TextInputType keyboardType;
final TextEditingController controller;
#override
State<ContentInputWidget> createState() => _ContentInputWidgetState();
}
class _ContentInputWidgetState extends State<ContentInputWidget> {
#override
Widget build(BuildContext context) {
print('Content Input Widget Rebuild');
return TextField(
decoration: InputDecoration(
labelText: widget.text,
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
),
controller: widget.controller,
keyboardType: widget.keyboardType,
maxLines: null,
);
}
}