Cant select radio buttons inside the form in flutter - flutter

Question

It won't allow me to change the radio button inside the form, the value also does not change no matter what is selected. I have tried the code outside the form and it works fine but when i put it inside the form then it stops working for reasons I do not know.
FloatingActionButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('New User'),
content: Stack(
children: <Widget>[
Positioned(
right: -40.0,
top: -40.0,
child: InkResponse(
onTap: () {
Navigator.of(context).pop();
},
child: CircleAvatar(
child: Icon(Icons.close),
backgroundColor: Colors.blue,
),
),
),
Form(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: TextFormField(
controller: nameController,
decoration: InputDecoration(
labelText: 'Name',
),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: TextFormField(
controller: surnameController,
decoration: InputDecoration(
labelText: 'Surname',
),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: TextFormField(
controller: userController,
decoration: InputDecoration(
labelText: 'Username',
),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: TextFormField(
controller: passController,
decoration: InputDecoration(
labelText: 'Password',
),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: TextFormField(
controller: mobileController,
decoration: InputDecoration(
labelText: 'Mobile num',
),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: TextFormField(
controller: emailController,
decoration: InputDecoration(
labelText: 'Email',
),
),
),
//radioButtons
Container(
padding: EdgeInsets.all(20),
child: Column(
children: [
Text(
"What is your gender?",
style: TextStyle(fontSize: 18),
),
Divider(),
RadioListTile(
title: Text("Male"),
value: "male",
groupValue: gender,
onChanged: (value) {
setState(() {
gender = value.toString();
});
},
),
RadioListTile(
title: Text("Female"),
value: "female",
groupValue: gender,
onChanged: (value) {
setState(() {
gender = value.toString();
});
},
),
RadioListTile(
title: Text("Other"),
value: "other",
groupValue: gender,
onChanged: (value) {
setState(() {
gender = value.toString();
});
},
)
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: FloatingActionButton(
child: Text("Submit"),
onPressed: () {
//createUser();
print(gender);
Navigator.pop(context);
},
),
)
],
),
),
),
],
),
);
});
},
child: Icon(Icons.person),
backgroundColor: Colors.blue,
),
it has a few text fields and then the radio buttons, the gender variable is declared as a string.

Answer 1

It's Because you are assigned a value in the dialog. Just Wrap Your Alert Dialog Widget with statfulBuilder and then stateState.
example
FloatingActionButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return AlertDialog(
title: const Text('New User'),
content: Stack(
children: <Widget>[
Positioned(
right: -40,
top: -40,
child: InkResponse(
onTap: () {
Navigator.of(context).pop();
},
child: const CircleAvatar(
backgroundColor: Colors.blue,
child: Icon(Icons.close),
),
),
),
Form(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8),
child: TextFormField(
controller: nameController,
decoration: const InputDecoration(
labelText: 'Name',
),
),
),
Padding(
padding: const EdgeInsets.all(8),
child: TextFormField(
controller: surnameController,
decoration: const InputDecoration(
labelText: 'Surname',
),
),
),
Padding(
padding: const EdgeInsets.all(8),
child: TextFormField(
controller: userController,
decoration: const InputDecoration(
labelText: 'Username',
),
),
),
Padding(
padding: const EdgeInsets.all(8),
child: TextFormField(
controller: passController,
decoration: const InputDecoration(
labelText: 'Password',
),
),
),
Padding(
padding: const EdgeInsets.all(8),
child: TextFormField(
controller: mobileController,
decoration: const InputDecoration(
labelText: 'Mobile num',
),
),
),
Padding(
padding: const EdgeInsets.all(8),
child: TextFormField(
controller: emailController,
decoration: const InputDecoration(
labelText: 'Email',
),
),
),
//radioButtons
Container(
padding: const EdgeInsets.all(20),
child: Column(
children: [
const Text(
'What is your gender?',
style: TextStyle(fontSize: 18),
),
const Divider(),
RadioListTile(
title: const Text('Male'),
value: 'male',
groupValue: gender,
onChanged: (value) {
setState(() {
gender = value.toString();
});
},
),
RadioListTile(
title: const Text('Female'),
value: 'female',
groupValue: gender,
onChanged: (value) {
setState(() {
gender = value.toString();
});
},
),
RadioListTile(
title: const Text('Other'),
value: 'other',
groupValue: gender,
onChanged: (value) {
setState(() {
gender = value.toString();
});
},
)
],
),
),
Padding(
padding: const EdgeInsets.all(8),
child: FloatingActionButton(
child: const Text('Submit'),
onPressed: () {
//createUser();
print(gender);
Navigator.pop(context);
},
),
)
],
),
),
),
],
),
);
},
);
},
);
},
backgroundColor: Colors.blue,
child: Icon(Icons.person),
);