Flutter：在 AlertDialog 上选择一个图标并显示新图标

Question

我正在尝试在 Flutter 中使用 AlertDialog，用户可以在其中按下卡片来选择图标。一旦他们选择了图标，AlertDialog 应该会显示新选择的图标。

现在，我有它，每次用户点击卡片时，卡片都会重新加载。但是，这意味着如果我选择一个图标，我需要点击以选择第二个图标，然后才能重新加载我之前的更改。

欢迎所有关于如何处理此类问题的建议和/或不同想法。

这是我下面的代码：

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');
          });
        },
      ),
    );
  }
}

这被警报对话框调用：

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),
        ],
      ),
    );
  }
}

这是它的样子： Alert Dialog 然后当卡片被按下时： IconPicker 选择图标后，更改不会反映在卡片上，直到再次按下卡片： After Icon is selected

Answer 1

modalBottomSheet 和 showDialog 等覆盖小部件中的上下文不同，因此状态不会重建，要进行重建，我们必须用 StatefulBuilder 小部件包装它，如下所示：-

  @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');
          });
        },
      ),
    );
  }
        
      });

建议在对AlertDialog 的调用中使用它并使所有内容无状态。