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

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.