Using StatelessWidget with method variable or Stateful widget? - flutter

Question

I am learning Flutter and I am looking what might be the pro's / con's of some specific way of solving this. I have a simple widget which is used as a ModalBottomSheet. It will contain a form with multiple text fields to submit some data - which is returned in the callback. Example:
class SimpleBottomPopupSheet extends StatelessWidget {
final Function onSubmit;
const BottomPopupSheet({this.onSubmit});
#override
Widget build(BuildContext context) {
String text;
return Column(children: [
TextField(
textAlign: TextAlign.center,
onChanged: (value) {
text = value;
},
),
ElevatedButton(
onPressed: () {
// Do something with the text
onSubmit(text);
Navigator.pop(context);
},
child: Text("SUBMIT"),
)
]);
}
}
This seems to work, but I am wondering if this is a correct way to use it (there will be more than just one text field). It feels like it should be a stateful widget as it is keeping the state of the input.
Any best practices around this use case?

Answer 1

The other comments are correct. This should be a StatefulWidget as any rebuilds of the widget will cause the "text" parameter to be reset. A rather naive and basic example of how to convert your StatelessWidget into a StatefulWidget is below:
class SimpleBottomPopupSheet extends StatefulWidget {
final Function onSubmit;
const SimpleBottomPopupSheet({this.onSubmit});
#override
State<SimpleBottomPopupSheet> createState() => _SimpleBottomPopupSheetState();
}
class _SimpleBottomPopupSheetState extends State<SimpleBottomPopupSheet> {
String _text;
#override
Widget build(BuildContext context) {
return Column(children: [
TextField(
textAlign: TextAlign.center,
onChanged: (value) {
_text = value;
},
),
ElevatedButton(
onPressed: () {
// Do something with the text
widget.onSubmit(_text);
Navigator.pop(context);
},
child: const Text("SUBMIT"),
)
]);
}
}

Answer 2

Your widget should be a StatefulWidget. What you wrote won't work because each time the user types something the text variable will be wiped out (and other nasty things :))
You should have a look at Flutter Form tutorial: https://flutter.dev/docs/cookbook/forms/validation!
You should use StatelessWidget only when the widget does not update its values! Otherwise, you should use a StatefulWidget or more complex state management solution. Again you can find many guides on flutter.dev!
(But using a method onSubmit to return the data to the previous view/widget is a good idea)