I have created a class, RadioButtonFormField():
import 'package:flutter/material.dart';
class RadioButtonFormField extends StatefulWidget {
final bool completed;
const RadioButtonFormField({Key? key, required this.completed}) : super(key: key);
@override
_RadioButtonFormFieldState createState() => _RadioButtonFormFieldState();
}
class _RadioButtonFormFieldState extends State<RadioButtonFormField> {
int? _value;
@override
Widget build(BuildContext context) {
if(widget.completed == true) {
_value = 1;
}
if(widget.completed == false) {
_value = 2;
}
return FormField( builder: (state) {
return StatefulBuilder(
builder: (BuildContext context, void Function(void Function()) setState) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RadioListTile(
title: const Text('Completed'),
value: 1,
groupValue: _value,
onChanged: (value) {
setState(() {
_value = value as int;
});
},
),
RadioListTile(
title: const Text('In Progress'),
value: 2,
groupValue: _value,
onChanged: (value) {
setState(() {
_value = value as int;
});
},
),
],
);
},
);
},
);
}
}
that I am using to set a boolean value to be used in my dialog on my homepage:
onTap: () => {
startDate = campaigns[index].startDate,
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: Stack(
children: <Widget>[
Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
validator: (value) {
if(value == null || value.isEmpty) {
return 'Please add a valid title.';
}
return null;
},
initialValue: campaigns[index].title,
onSaved: (value) {
title = value!;
}
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: _buildStartDateField()
),
Padding(
padding: const EdgeInsets.all(8.0),
child: RadioButtonFormField(completed: campaigns[index].completed)
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
child: const Text('Update Campaign'),
onPressed: () async{
if(!_formKey.currentState!.validate()) {
return;
}
_formKey.currentState!.save();
updateCampaign(campaigns[index].id, title, startDate, completed!);
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => const Nav()
));
showDialog(
context: context,
builder: (ctx) => AlertDialog(
title: const Text('Your campaign has been successfully updated!'),
content: Text('$title has been updated and you have been returned to the home screen.'),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(ctx).pop(true);
},
child: const Text('Ok')
)
],
));
},
),
)
],
)
),
],
),
);
},
),
}
How can I return the value of my radiobutton to the original screen? Since it is an AlertDialog, I can’t use Navigator.pop(), as that would return me to the original homescreen, outside of the alert Dialog.
>Solution :
You can use a callback method on RadioButtonFormField.
class RadioButtonFormField extends StatefulWidget {
final Function(int?) callback;
final bool completed;
const RadioButtonFormField(
{Key? key, required this.callback, required this.completed})
: super(key: key);
@override
_RadioButtonFormFieldState createState() => _RadioButtonFormFieldState();
}
And on changed, do the same for others
RadioListTile<int>(
title: const Text('Completed'),
value: 1,
groupValue: _value,
onChanged: (value) {
widget.callback(value);
setState(() {
_value = value as int;
});
},
),
And use like
RadioButtonFormField(
completed: false,
callback: (p0) {
print(p0);
},
),