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

Issue

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

Solution

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.

Answered By – sameer kashyap

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)