Flutter: Select an icon on an AlertDialog and show the new icon - flutter

Question

I am trying to use an AlertDialog in flutter where the user can press a card to select an icon. Once they've selected the icon, the AlertDialog should show the newly selected icon.
Right now, I have it so that every time the user taps on the card, the card gets reloaded. However, this means that if I select an icon, I need to tap to select a second icon before it gets reloaded with my previous change.
All advice and/or different ideas on how to handle something like this are welcome.
Here is the code I have below:
import 'package:flutter/material.dart';
import 'package:test_003/data/dataStoreLegendItems.dart'; //has defaultIcon which should get updated
import 'package:test_003/dialogs/iconPickerDialog.dart';
class IconPickerCard extends StatefulWidget {
var alertDialogContext;
IconPickerCard({this.alertDialogContext});
#override
_IconPickerCardState createState() => _IconPickerCardState();
}
class _IconPickerCardState extends State<IconPickerCard> {
#override
Widget build(BuildContext context) {
return new Card(
child: ListTile(
leading: legendItems.defaultIcon,
title: Text('Select Icon'),
onTap: () async {
setState(() {
print("First line of IconPickerCard set state");
showIconPickerDialog(widget.alertDialogContext);
print('Icon Picker Card List Tile pressed');
});
},
),
);
}
}
This gets called by the Alert Dialog:
import 'package:flutter/material.dart';
import 'package:test_003/components/iconPickerForPopup.dart';
class ReuseAddPopup extends StatefulWidget {
#override
_ReuseAddPopupState createState() => _ReuseAddPopupState();
}
class _ReuseAddPopupState extends State<ReuseAddPopup> {
#override
Widget build(BuildContext context) {
return AlertDialog(
content: Column(
children: [
IconPickerCard(alertDialogContext: context),
],
),
);
}
}
This is what it looks like:
Alert Dialog
Then when the card is pressed:
IconPicker
After an icon is selected the changes do not get reflected on the card until the card is pressed again:
After Icon is selected

Answer 1

The context is different in overlay widgets such as modalBottomSheet and showDialog so the state does not rebuild, to make rebuild we have to wrap it with a StatefulBuilder widget like so:-
#override
Widget build(BuildContext context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter dialogState /*You can rename this!*/) {
return Card(
child: ListTile(
leading: legendItems.defaultIcon,
title: Text('Select Icon'),
onTap: () async {
dialogState(() {
print("First line of IconPickerCard set state");
showIconPickerDialog(widget.alertDialogContext);
print('Icon Picker Card List Tile pressed');
});
},
),
);
}
});
would recommend using this in the call to AlertDialog and make everything stateless.