Flutter Checkbox did not work in AlertDialog - flutter

Question

I am doing a checkbox in AlertDialog. I want the user to tick the checkbox before upload. My problem is if I set the variable as false the checkbox will not change to true or change back to false. Here is my code:
bool _isChecked = false;
List<String> _texts = [
"I have confirm the data is correct",
"I have agreed to terms and conditions.",
];
showConfirmationDialog(BuildContext context){
AlertDialog alert=AlertDialog(
title: Text('Confirmation'),
content:
ListView(
padding: EdgeInsets.all(8.0),
children: _texts.map((text) => CheckboxListTile(
title: Text(text),
value: _isChecked,
onChanged: (val) {
setState(() {
_isChecked = val;
});
},
)).toList(),
),
actions: <Widget>[
SizedBox(
width: 300,
child:RaisedButton(
color: Colors.blue,
onPressed: () => upload(context),
child:Text('Upload'),
)
)
],
);
showDialog(barrierDismissible: false,
context:context,
builder:(BuildContext context){
return alert;
},
);
}
Can anyone help me?

Answer 1

You need stateful widget because showDialog can't change state.
Following code help you to understand more.
class DeleteWidget extends StatefulWidget {
#override
_DeleteWidgetState createState() => _DeleteWidgetState();
}
class _DeleteWidgetState extends State<DeleteWidget> {
var currentSection;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: RaisedButton(
onPressed: () {
showConfirmationDialog(context);
},
child: Text("data"),
),
),
),
);
}
showConfirmationDialog(BuildContext context) {
showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return CustomDialog();
},
);
}
}
class CustomDialog extends StatefulWidget {
#override
_CustomDialogState createState() => _CustomDialogState();
}
class _CustomDialogState extends State<CustomDialog> {
List<bool> _isChecked = [false, false];
bool canUpload = false;
List<String> _texts = [
"I have confirm the data is correct",
"I have agreed to terms and conditions.",
];
#override
Widget build(BuildContext context) {
return AlertDialog(
title: Text('Confirmation'),
content: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: ListView(
shrinkWrap: true,
padding: EdgeInsets.all(8.0),
children: [
ListView.builder(
shrinkWrap: true,
itemCount: _texts.length,
itemBuilder: (_, index) {
return CheckboxListTile(
title: Text(_texts[index]),
value: _isChecked[index],
onChanged: (val) {
setState(() {
_isChecked[index] = val;
canUpload = true;
for (var item in _isChecked) {
if (item == false) {
canUpload = false;
}
}
});
},
);
},
),
]),
),
],
),
),
actions: <Widget>[
SizedBox(
width: 300,
child: RaisedButton(
color: Colors.blue,
onPressed: canUpload
? () {
print("upload");
}
: null,
child: Text('Upload'),
))
],
);
}
}

Answer 2

bool _isChecked = false;
List<String> _texts = [
"I have confirm the data is correct",
"I have agreed to terms and conditions.",
];
showConfirmationDialog(BuildContext context) {
showDialog(
barrierDismissible: false,
context: context,
builder: (context) {
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
title: Text('Confirmation'),
content: ListView(
padding: EdgeInsets.all(8.0),
children: _texts
.map((text) => CheckboxListTile(
activeColor: Colors.pink,
title: Text(text),
value: _isChecked,
onChanged: (val) {
setState(() {
_isChecked = val;
});
},
))
.toList(),
),
actions: <Widget>[
SizedBox(
width: 300,
child: RaisedButton(
color: Colors.blue,
onPressed: () => () {
debugPrint("upload image");
},
child: Text('Upload'),
))
],
);
},
);
},
);
}

Answer 3

inside the class add
void isChecked(bool newValue) => setState(() {
_isChecked = newValue;
if (_isChecked) {
//something here
} else {
// change value here
}
});
//in checkbox
onChanged: (val) {
isChecked(val);
}
I hope it's working

Answer 4

That is because of the alert dialog state.
If we are using a StatefullBuilder in a showModelBottomSheet, The context of the page will work fine from the showModelBottomSheet. But the Aler dialog will not change while setState is calling.
This is because the AlerDialog needs a stateful class.
Note: the State of showModelBottomSheet and an alert Dialog are not equal.
Hope the following code will help.
ElevatedButton(
onPressed: () => showDialog(
context: context,
builder: (BuildContext contex) {
return EnterUPIBOX();
}),
child: Text('UPI ID'),
),
//The alert dialog will inherit from statefulWidget.
class EnterUPIBOX extends StatefulWidget {
const EnterUPIBOX({
Key? key,
}) : super(key: key);
#override
State<EnterUPIBOX> createState() => _EnterUPIBOXState();
}
class _EnterUPIBOXState extends State<EnterUPIBOX> {
#override
Widget build(BuildContext context) {
return AlertDialog(
title: Text('CheckBox'),
actions:[ Checkbox(
value: check,
onChanged: (value) {
setState(() {
check = !check;
});
}
),
]
),
}
}