Flutter: setState on showDialog() - flutter

Question

I need to update the value within the showDialog() [inside confirmBox()] function, when ' + ' or ' - ' is pressed; and render it onto the Container Widget. The setState() doesn't seem to work on that pop up Container.
How do I go about doing this?
(I'm a beginner)
int _n = 0; //counter variable
void add() {
setState(() {
_n++;
});
}
void minus() {
setState(() {
if (_n != 0)
_n--;
});
}
void confirmBox() {
showDialog(
context: context,
builder: (BuildContext context){
return Container(
child: Scaffold(
body: Column(
children: <Widget>[
Center(
child: Column(
children: <Widget>[
FloatingActionButton(
onPressed: add,
child: Icon(Icons.add, color: Colors.black,),
backgroundColor: Colors.white,),
Text("$_n", //_n value is not updating yet
style: TextStyle(fontSize: 60.0)),
FloatingActionButton(
onPressed: minus,
child: Icon(
const IconData(0xe15b, fontFamily: 'MaterialIcons'),
color: Colors.black),
backgroundColor: Colors.white,
),
],
),
),
],
),
),
);
}
);
}

Answer 1

EDIT: In this showDialog document, google say
EDIT2: This code will work
int _n = 0; //counter variable
void add(setState) {
setState(() {
_n++;
});
}
void minus(setState) {
setState(() {
if (_n != 0) _n--;
});
}
void confirmBox() {
showDialog(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, StateSetter setState) {
return Container(
child: Scaffold(
body: Column(
children: <Widget>[
Center(
child: Column(
children: <Widget>[
FloatingActionButton(
onPressed: () => add(setState),
child: Icon(
Icons.add,
color: Colors.black,
),
backgroundColor: Colors.white,
),
Text("$_n", //_n value is not updating yet
style: TextStyle(fontSize: 60.0)),
FloatingActionButton(
onPressed: () => minus(setState),
child: Icon(
const IconData(0xe15b,
fontFamily: 'MaterialIcons'),
color: Colors.black),
backgroundColor: Colors.white,
),
],
),
),
],
),
),
);
});
});
}
Use a StatefulBuilder or a custom StatefulWidget if the dialog needs to update dynamically.
Put this widget and other functions into new StatefulWidget
Container(
child: Scaffold(
body: Column(...
And call it inside builder of showDialog

Answer 2

Wrap all the content of the dialog inside of a StatefulBuilder:
https://api.flutter.dev/flutter/widgets/StatefulBuilder-class.html
Example:
await showDialog<void>(
context: context,
builder: (BuildContext context) {
int selectedRadio = 0;
return AlertDialog(
content: StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Column(
mainAxisSize: MainAxisSize.min,
children: List<Widget>.generate(4, (int index) {
return Radio<int>(
value: index,
groupValue: selectedRadio,
onChanged: (int value) {
setState(() => selectedRadio = value);
},
);
}),
);
},
),
);
},
);

Answer 3

There can be two approaches,
Method 1
Just declare a StatefulBuilder or StatefulWidget inside your dialog.
Method 2
Declare a abstract class
abstract class AlertDialogCallback {
void onPositive(Object object);
void onNegative();
}
then implement this class to your widget like this,
class _ContactUsState extends State<ContactUs> implements AlertDialogCallback {
...
//open dialog and pass this to provide callback a context
onPressed:(){CustomAlertDialog(this).openDialog();}
...
//
#override
void onNegative() {
Navigator.of(context).pop();
}
#override
void onPositive(Object object) {
// do your logic here
}
}
Inside CustomAlertDialog get your mAlertDialogCallback and pass a object there
class CustomAlertDialog {
AlertDialogCallback mAlertDialogCallback;
CustomAlertDialog([this.mAlertDialogCallback]);
openDialog() {
// flutter defined function
showDialog(
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: Text(title),
content: Text(message),
actions: <Widget>[
// usually buttons at the bottom of the dialog
FlatButton(
child: Text(
actionButtonText1.toString().toUpperCase(),
),
onPressed: () {
Navigator.of(context).pop();
mAlertDialogCallback.onPositive(obj);
},
)
],
);
},
);
}
}

Answer 4

Create a StatefulWidget with the widgets you need to display in a Dialog
class MyDialog extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _MyDialogState();
}
}
class _MyDialogState extends State<MyDialog> {
int _n = 0; //counter variable
void add() {
setState(() {
_n++;
});
}
void minus() {
setState(() {
if (_n != 0) _n--;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FloatingActionButton(
onPressed: add,
child: Icon(
Icons.add,
color: Colors.black,
),
backgroundColor: Colors.white,
),
Text("$_n", //_n value is not updating yet
style: TextStyle(fontSize: 60.0)),
FloatingActionButton(
onPressed: minus,
child: Icon(const IconData(0xe15b, fontFamily: 'MaterialIcons'),
color: Colors.black),
backgroundColor: Colors.white,
),
],
),
),
);
}
}
And then make change in your 'confirmBox' method as,
void confirmBox() {
showDialog(
context: context,
builder: (BuildContext context) {
return MyDialog();
},
);
}

Answer 5

In case you want to know if the string only contains the decimal digits you can use this function
bool validateIsInt(String str) {
const String digits = "0123456789";
for (int i = 0; i < str.length; i++) {
bool wasFound = false;
for (int j = 0; j < digits.length; j++) {
if (str[i] == digits[j]) {
wasFound = true;
break;
}
}
if (!wasFound) {
return false;
}
}
return true;
}