How to update a field even if it is not inside the build Widget? - flutter

Question

I have 2 variables that can be updated if I pressed a button. _tempQuan1 is not getting updated (immediately) since it is not in the build Widget. On the other hand, _tempQuan2 gets the updated for every button press. Is there a way so that I can get the _tempQuan1 to work same as _tempQuan2?
Note: I have tried to remove all other codes until I found out about the information above.
Edit: I have also tried to make it as a stateless widget and use Getx and make an observable variable but I still unable to do it.
import 'package:flutter/material.dart';
import 'package:awesome_dialog/awesome_dialog.dart';
class ShoppingWidget extends StatefulWidget {
State<StatefulWidget> createState() => ShoppingState();
}
class ShoppingState extends State<ShoppingWidget> {
int _tempQuan1 = 1;
int _tempQuan2 = 1;
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
showBuyPopup() async {
AwesomeDialog(
context: context,
dialogType: DialogType.NO_HEADER,
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: <Widget>[
Container(
width: 32.0,
height: 25.0,
child: Text(
_tempQuan1.toString(),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Material(
child: InkWell(
splashColor: Theme.of(context).primaryColor,
onTap: () {
if (this.mounted) {
setState(() {
_tempQuan1++;
});
}
print('increase');
},
child: Container(
width: 35.0,
height: 32.0,
decoration: BoxDecoration(
color: Theme.of(context).primaryColorDark.withOpacity(0.9),
borderRadius: BorderRadius.circular(8.0),
),
child: Icon(
Icons.add,
color: Colors.white,
size: 18.0,
),
),
),
),
),
],
),
SizedBox(
height: 10.0,
),
],
),
),
buttonsTextStyle: Theme.of(context).textTheme.bodyText2,
showCloseIcon: false,
btnCancelOnPress: () {},
btnOkOnPress: () async {},
)..show();
}
#override
Widget build(BuildContext context) {
print('PATH: item card widget build');
return Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Text(
_tempQuan2.toString(),
),
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Material(
child: InkWell(
splashColor: Theme.of(context).primaryColor,
onTap: () {
if (this.mounted) {
setState(() {
_tempQuan2++;
});
}
print('increase');
},
child: Container(
width: 35.0,
height: 32.0,
decoration: BoxDecoration(
color: Theme.of(context).primaryColorDark.withOpacity(0.9),
borderRadius: BorderRadius.circular(8.0),
),
child: Icon(
Icons.add,
color: Colors.white,
size: 18.0,
),
),
),
),
),
],
),
Container(
child: ElevatedButton(
onPressed: () {
showBuyPopup();
},
child: Text(
'Button',
),
),
),
],
),
);
}
}

Answer 1

The easiest solution is to move the body of your dialog into it's own stateful widget.. ie something like
AwesomeDialog(
context: context,
body: MyAwesomeDialogBody(tempQuan: _tempQuan2),
).show()
And then have a stateful widget MyAwesomeDialogBody which basically does everything you had previously in the body.
You would also have to pass in some callback so the changes to tempQuan are communicated back to the parent widget..