State In Modal Bottom Sheet in Flutter - flutter

Question

I would like to know why the state of the below radio buttons change post selection whenever the keyboard appears upon clicking on the title textfield. Here's how it goes:
The Radio Button named Self comes pre-selected when the ModalBottomSheet first comes up. I now select Personal. Also, by default, the Work button also comes pre-selected.
The moment the keyboard appears, everything gets back to their original state.
openDialog(BuildContext context) {
//final themeProvider = Provider.of<ThemeProvider>(context);
showModalBottomSheet(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(10.0))),
isScrollControlled: true,
// backgroundColor: Colors.grey[800],
backgroundColor: Theme.of(context).colorScheme.onSurfaceVariant,
// backgroundColor: Colors.red,
context: context,
builder: (context) {
// bool _show = true;
int? _radioValue = 0;
int? _managerValue = 0;
String? assignedName;
// void _handleRadioValueChange(value) {
// print('RADIO VALUEEEEEEEE: $value');
// }
final themeProvider = Provider.of<ThemeProvider>(context);
return StatefulBuilder(builder: (context, setState) {
return Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
.......
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Radio(
fillColor: (themeProvider.darkTheme)
? MaterialStateProperty.resolveWith<
Color>((states) {
if (states.contains(
MaterialState.disabled)) {
return Colors.black;
}
return Colors.white;
})
: MaterialStateProperty.resolveWith<
Color>((states) {
if (states.contains(
MaterialState.disabled)) {
return Colors.black;
}
return Colors.black;
}),
value: 0,
groupValue: _managerValue,
onChanged: (value) {
setState(() {
_managerValue = 0;
});
print("radiofirst" +
value.toString() +
"radiovalue" +
_managerValue.toString());
},
),
Row(
children: [
Icon(
Icons.person,
color: Theme.of(context).accentColor,
),
SizedBox(
width:
SizeVariables.getWidth(context) *
0.007,
),
const Text(
'Self',
style: TextStyle(fontSize: 16.0),
),
],
),
SizedBox(
width: SizeVariables.getWidth(context) *
0.028),
Radio(
fillColor: (themeProvider.darkTheme)
? MaterialStateProperty.resolveWith<
Color>((states) {
if (states.contains(
MaterialState.disabled)) {
return Colors.black;
}
return Colors.white;
})
: MaterialStateProperty.resolveWith<
Color>((states) {
if (states.contains(
MaterialState.disabled)) {
return Colors.black;
}
return Colors.black;
}),
value: 1,
groupValue: _managerValue,
onChanged: (value) {
setState(() {
_managerValue = 1;
});
print("radiosecond " +
value.toString() +
"radiovalue " +
_managerValue.toString());
},
),
Row(
children: [
Icon(
Icons.group,
color: Theme.of(context).accentColor,
),
SizedBox(
width:
SizeVariables.getWidth(context) *
0.007,
),
const Text(
'Assign To',
style: TextStyle(
fontSize: 16.0,
),
),
],
),
],
),
_managerValue == 0
? Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Radio(
fillColor: (themeProvider.darkTheme)
? MaterialStateProperty
.resolveWith<Color>(
(states) {
if (states.contains(
MaterialState
.disabled)) {
return Colors.black;
}
return Colors.white;
})
: MaterialStateProperty
.resolveWith<Color>(
(states) {
if (states.contains(
MaterialState
.disabled)) {
return Colors.black;
}
return Colors.black;
}),
value: 0,
groupValue: _radioValue,
onChanged: (value) {
setState(() {
_radioValue = 0; //Work
});
print("radiofirst" +
value.toString() +
"radiovalue" +
_radioValue.toString());
},
),
Row(
children: [
Icon(
Icons.work,
color: Theme.of(context)
.accentColor,
),
SizedBox(
width: SizeVariables.getWidth(
context) *
0.007,
),
const Text(
'Work',
style:
TextStyle(fontSize: 16.0),
),
],
),
Radio(
fillColor: (themeProvider.darkTheme)
? MaterialStateProperty
.resolveWith<Color>(
(states) {
if (states.contains(
MaterialState
.disabled)) {
return Colors.black;
}
return Colors.white;
})
: MaterialStateProperty
.resolveWith<Color>(
(states) {
if (states.contains(
MaterialState
.disabled)) {
return Colors.black;
}
return Colors.black;
}),
value: 1,
groupValue: _radioValue,
onChanged: (value) {
setState(() {
_radioValue = 1; //Personal
});
print("radiosecond " +
value.toString() +
"radiovalue " +
_radioValue.toString());
},
),
Row(
children: [
Icon(
Icons.person,
color: Theme.of(context)
.accentColor,
),
SizedBox(
width: SizeVariables.getWidth(
context) *
0.007,
),
const Text(
'Personal',
style: TextStyle(
fontSize: 16.0,
),
),
],
),
],
)
: Row(),
],
),
),
),
Form(
key: _key1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Container(
// height: SizeVariables.getHeight(context) * 0.1,
// width: double.infinity,
// color: Theme.of(context).colorScheme.onSurfaceVariant,
// ),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10.0, vertical: 20.0),
child: TextFormField(
controller: _taskTitle,
cursorColor: Colors.white,
// controller: taskController,
// maxLines: 5,
style: Theme.of(context).textTheme.bodyText1,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.amber,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
// border: new OutlineInputBorder(
// borderSide: new BorderSide(color: Colors.amber),
// ),
label: Text(
"Task Name",
style: Theme.of(context).textTheme.bodyText1!,
),
labelStyle: Theme.of(context).textTheme.bodyText1,
//border: InputBorder.none,
),
),
),
],
),
),
],
),
);
});
}

Answer 1

Flutter rebuilds the whole widget when keyboard appears or disappears. So you should use StatefulWidget or other state management like Bloc to have
int? _radioValue = 0;
int? _managerValue = 0;
String? assignedName;
For quick fix, just create new StatefulWidget and move all your implementation here.
Edited
I created new widget here called YourWidget, you can use for further.
openDialog(BuildContext context) {
//final themeProvider = Provider.of<ThemeProvider>(context);
showModalBottomSheet(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(10.0))),
isScrollControlled: true,
// backgroundColor: Colors.grey[800],
backgroundColor: Theme
.of(context)
.colorScheme
.onSurfaceVariant,
// backgroundColor: Colors.red,
context: context,
builder: (context) {
// bool _show = true;
// void _handleRadioValueChange(value) {
// print('RADIO VALUEEEEEEEE: $value');
// }
return const YourWidget();
});
}
class YourWidget extends StatefulWidget {
const YourWidget({Key? key}) : super(key: key);
#override
State<YourWidget> createState() => _YourWidgetState();
}
class _YourWidgetState extends State<YourWidget> {
int? _radioValue = 0;
int? _managerValue = 0;
String? assignedName;
#override
Widget build(BuildContext context) {
final themeProvider = Provider.of<ThemeProvider>(context);
return Padding(
padding: EdgeInsets.only(
bottom: MediaQuery
.of(context)
.viewInsets
.bottom,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
//.......
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Radio(
fillColor: (themeProvider.darkTheme)
? MaterialStateProperty.resolveWith<
Color>((states) {
if (states.contains(
MaterialState.disabled)) {
return Colors.black;
}
return Colors.white;
})
: MaterialStateProperty.resolveWith<
Color>((states) {
if (states.contains(
MaterialState.disabled)) {
return Colors.black;
}
return Colors.black;
}),
value: 0,
groupValue: _managerValue,
onChanged: (value) {
setState(() {
_managerValue = 0;
});
print("radiofirst" +
value.toString() +
"radiovalue" +
_managerValue.toString());
},
),
Row(
children: [
Icon(
Icons.person,
color: Theme
.of(context)
.accentColor,
),
SizedBox(
width:
SizeVariables.getWidth(context) *
0.007,
),
const Text(
'Self',
style: TextStyle(fontSize: 16.0),
),
],
),
SizedBox(
width: SizeVariables.getWidth(context) *
0.028),
Radio(
fillColor: (themeProvider.darkTheme)
? MaterialStateProperty.resolveWith<
Color>((states) {
if (states.contains(
MaterialState.disabled)) {
return Colors.black;
}
return Colors.white;
})
: MaterialStateProperty.resolveWith<
Color>((states) {
if (states.contains(
MaterialState.disabled)) {
return Colors.black;
}
return Colors.black;
}),
value: 1,
groupValue: _managerValue,
onChanged: (value) {
setState(() {
_managerValue = 1;
});
print("radiosecond " +
value.toString() +
"radiovalue " +
_managerValue.toString());
},
),
Row(
children: [
Icon(
Icons.group,
color: Theme
.of(context)
.accentColor,
),
SizedBox(
width:
SizeVariables.getWidth(context) *
0.007,
),
const Text(
'Assign To',
style: TextStyle(
fontSize: 16.0,
),
),
],
),
],
),
_managerValue == 0
? Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Radio(
fillColor: (themeProvider.darkTheme)
? MaterialStateProperty
.resolveWith<Color>(
(states) {
if (states.contains(
MaterialState
.disabled)) {
return Colors.black;
}
return Colors.white;
})
: MaterialStateProperty
.resolveWith<Color>(
(states) {
if (states.contains(
MaterialState
.disabled)) {
return Colors.black;
}
return Colors.black;
}),
value: 0,
groupValue: _radioValue,
onChanged: (value) {
setState(() {
_radioValue = 0; //Work
});
print("radiofirst" +
value.toString() +
"radiovalue" +
_radioValue.toString());
},
),
Row(
children: [
Icon(
Icons.work,
color: Theme
.of(context)
.accentColor,
),
SizedBox(
width: SizeVariables.getWidth(
context) *
0.007,
),
const Text(
'Work',
style:
TextStyle(fontSize: 16.0),
),
],
),
Radio(
fillColor: (themeProvider.darkTheme)
? MaterialStateProperty
.resolveWith<Color>(
(states) {
if (states.contains(
MaterialState
.disabled)) {
return Colors.black;
}
return Colors.white;
})
: MaterialStateProperty
.resolveWith<Color>(
(states) {
if (states.contains(
MaterialState
.disabled)) {
return Colors.black;
}
return Colors.black;
}),
value: 1,
groupValue: _radioValue,
onChanged: (value) {
setState(() {
_radioValue = 1; //Personal
});
print("radiosecond " +
value.toString() +
"radiovalue " +
_radioValue.toString());
},
),
Row(
children: [
Icon(
Icons.person,
color: Theme
.of(context)
.accentColor,
),
SizedBox(
width: SizeVariables.getWidth(
context) *
0.007,
),
const Text(
'Personal',
style: TextStyle(
fontSize: 16.0,
),
),
],
),
],
)
: Row(),
],
),
),
Form(
key: _key1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Container(
// height: SizeVariables.getHeight(context) * 0.1,
// width: double.infinity,
// color: Theme.of(context).colorScheme.onSurfaceVariant,
// ),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10.0, vertical: 20.0),
child: TextFormField(
controller: _taskTitle,
cursorColor: Colors.white,
// controller: taskController,
// maxLines: 5,
style: Theme
.of(context)
.textTheme
.bodyText1,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.amber,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
// border: new OutlineInputBorder(
// borderSide: new BorderSide(color: Colors.amber),
// ),
label: Text(
"Task Name",
style: Theme
.of(context)
.textTheme
.bodyText1!,
),
labelStyle: Theme
.of(context)
.textTheme
.bodyText1,
//border: InputBorder.none,
),
),
),
],
),
),
]),
);
}
}