如何在 flutter 中创建 SimpleDialog 小部件的动态内容的最佳实践？

Question

i have simpleDialog widget that is can dynamically change the its child or its content when i click the button inside its child, the example like below..

class PopupDailyMood extends StatefulWidget {
  const PopupDailyMood({Key? key}) : super(key: key);

  @override
  _PopupDailyMoodState createState() => _PopupDailyMoodState();
}

class _PopupDailyMoodState extends State<PopupDailyMood> {
  String mode = "selectMood";
  String mood = "";

  @override
  Widget build(BuildContext context) {
    double widthDialog = MediaQuery.of(context).size.width * 0.90;

    return SimpleDialog(
      insetPadding: EdgeInsets.symmetric(horizontal: 20),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
      contentPadding: EdgeInsets.all(0),
      backgroundColor: Color(0XFF020202),
      elevation: 0,
      children: <Widget>[
        Container(
            width: widthDialog,
            padding: EdgeInsets.fromLTRB(14, 31, 14, 34),
            child: mode == "selectMood"
                ? moodSelect(context)
                : mode == "blockerConfirm"
                    ? blockerConfirm()
                    : mode == "done2"
                        ? done2()
                        : null)
      ],
    );
  }

the question.. is there another way to create dynamic simple dialog, that is can shifting or changing the simple dialog when some action have trigered?

Answer 1

Yes, there is, I don't recomend you use strings when talking about specific modes, you could use ints, however that makes it impossible to tell what each value should be: so I present to you: ENUMS

enum MoodState {
  MoodSelect,
  BlockerConfirm,
  Done2,
}

If you declare an enum like above in some file, you can now do something like this:

mode == MoodState.MoodSelect
                ? moodSelect(context)
                : mode == MoodState.BlockerConfirm
                    ? blockerConfirm()
                    : mode == MoodState.Done2
                        ? done2()
                        : null)

This helps with typos and allows Intellisense to pick up on what you want to do. But it's still a bit clunky, so why not move it to a function?

Widget _buildDialog(MoodState state) {
  switch (state) {
    case MoodState.MoodSelect: return moodSelect(context);
    case MoodState.BlockerConfirm: return blockerConfirm();
    case MoodState.Done2: return done2();
  }
}

you could also put it into a map of type Map<MoodState, Widget> and get it like so: child: myMap[moodState]