Flutter: Create custom dialog as StatefulWidget? - flutter

Question

I'm working on an app that will get only 2 inputs from the user, maybe 3 in the future. So I use showDialog with 2 inputfield and 2 buttons. Very simple. Looks pretty much like this:
enter image description here
It shows up perfectly in the main screen if it's being called as a function. But I would like to use that same dialog in another screen in the app and just change the text on one of the buttons. Since the dialog code it's long and I don't want to repeat it, I want to put it in a new StatefulWidget (to retrieve the information from the input fields and clear them afterwards). Now the problem is that I can't find a way to return the dialog from an external widget. I don't know if it's actually impossible because of the whole async Widget incompatibility or I'm just too stupid to figure this out.
This is the code for my dialog (as a function):
_dialog() async {
await showDialog<String>(
context: context,
child: ButtonBarTheme(
data: ButtonBarThemeData(alignment: MainAxisAlignment.center),
child: AlertDialog(
contentPadding: const EdgeInsets.all(20.0),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: EdgeInsets.only(bottom: 15),
child: new TextField(
// onSubmitted: next,
autofocus: true,
controller: _title,
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 2),
labelText: 'Title',
hintText: 'Example: New Smartphone',
),
),
),
TextField(
autofocus: true,
controller: _codigo,
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
labelText: 'Code',
hintText: 'Example: EC20008347607',
),
),
],
),
actions: [
Row(
children: [
Container(
padding: EdgeInsets.only(right: 35, bottom: 5),
child: FlatButton(
color: Colors.cyan[600],
child: const Text('CANCEL'),
onPressed: () {
Navigator.pop(context);
}),
),
Container(
padding: EdgeInsets.only(left: 15, bottom: 5),
child: FlatButton(
color: Colors.cyan[600],
child: const Text('ADD'),
onPressed: () {
setState(() {
_title.text = '';
_code.text = '';
});
Navigator.pop(context);
},
),
),
],
),
],
),
),
);
}
Thanks in advance for any help. I'm a beginner.

Answer 1

You can put it in another dart file that accepts any property values that aren't static, like this:
CustomAlertDialog({String leftButtonText, String rightButtonText}) async {
return AlertDialog(
contentPadding: const EdgeInsets.all(20.0),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: EdgeInsets.only(bottom: 15),
child: new TextField(
// onSubmitted: next,
autofocus: true,
controller: _title,
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 2),
labelText: 'Title',
hintText: 'Example: New Smartphone',
),
),
),
TextField(
autofocus: true,
controller: _codigo,
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
labelText: 'Code',
hintText: 'Example: EC20008347607',
),
),
],
),
actions: [
Row(
children: [
Container(
padding: EdgeInsets.only(right: 35, bottom: 5),
child: FlatButton(
color: Colors.cyan[600],
child: const Text('$leftButtonText'),
onPressed: () {
Navigator.pop(context);
}),
),
Container(
padding: EdgeInsets.only(left: 15, bottom: 5),
child: FlatButton(
color: Colors.cyan[600],
child: const Text('$rightButtonText'),
onPressed: () {
setState(() {
_title.text = '';
_code.text = '';
});
Navigator.pop(context);
},
),
),
],
),
],
),
),
);
}

Answer 2

I think we have to build our widget from the ground up as there is no dialog box that exposes the state. Hope this helps:
https://api.flutter.dev/flutter/widgets/StatefulBuilder-class.html

Answer 3

Try my code snippet
**
MaterialButton(
color: Colors.blue,
height: 50,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
textColor: Colors.white,
child: Text('Show Info Dialog',),
onPressed: () {
SimpleDialogs.showinfoDialog(context: context, title: "Something insert here");
},