Store dialogs state in controls to avoid stateful widget state drifting (#5815)

* Refactor dialog and picker controls to use StatelessWidget

Converted AlertDialog, Banner, BottomSheet, CupertinoAlertDialog, DatePicker, DateRangePicker, SnackBar, and TimePicker controls from StatefulWidget to StatelessWidget. State management is now handled via control properties and post-frame callbacks, simplifying the widget structure and improving consistency across dialog and picker controls.

* Refactor dialog dismissal event types and update picker dates

Changed event handler parameter types from specific dialog controls to the generic ft.DialogControl in several examples for consistency. Updated date and date range picker examples to use dynamic date ranges based on the current date.

Author: FeodorFitsner

packages/flet/lib/src/controls/alert_dialog.dart

@@ -13,139 +13,98 @@ import '../widgets/control_inherited_notifier.dart';
 import '../widgets/error.dart';
 import 'control_widget.dart';
 
-class AlertDialogControl extends StatefulWidget {
+class AlertDialogControl extends StatelessWidget {
   final Control control;
 
-  AlertDialogControl({Key? key, required this.control})
-      : super(key: key ?? ValueKey("control_${control.id}"));
+  const AlertDialogControl({super.key, required this.control});
 
-  @override
-  State<AlertDialogControl> createState() => _AlertDialogControlState();
-}
-
-class _AlertDialogControlState extends State<AlertDialogControl> {
-  bool _open = false;
-  NavigatorState? _navigatorState;
-  String? _error;
-
-  @override
-  void didChangeDependencies() {
-    super.didChangeDependencies();
-    _navigatorState = Navigator.of(context);
-    _toggleDialog();
-  }
-
-  @override
-  void didUpdateWidget(covariant AlertDialogControl oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    _toggleDialog();
-  }
-
-  @override
-  void dispose() {
-    debugPrint("AlertDialog.dispose: ${widget.control.id}");
-    _closeDialog();
-    super.dispose();
-  }
-
-  Widget _createAlertDialog() {
+  Widget _createAlertDialog(BuildContext context) {
     return ControlInheritedNotifier(
-      notifier: widget.control,
+      notifier: control,
       child: Builder(builder: (context) {
         ControlInheritedNotifier.of(context);
-        var title = widget.control.get("title");
+        var title = control.get("title");
         return AlertDialog(
           title: title is Control
               ? ControlWidget(control: title)
               : title is String
                   ? Text(title)
                   : null,
-          titlePadding: widget.control.getPadding("title_padding"),
-          content: widget.control.buildWidget("content"),
-          contentPadding: widget.control.getPadding("content_padding",
+          titlePadding: control.getPadding("title_padding"),
+          content: control.buildWidget("content"),
+          contentPadding: control.getPadding("content_padding",
               const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0))!,
-          actions: widget.control.buildWidgets("actions"),
-          actionsPadding: widget.control.getPadding("actions_padding"),
-          actionsAlignment:
-              widget.control.getMainAxisAlignment("actions_alignment"),
-          shape: widget.control.getShape("shape", Theme.of(context)),
-          semanticLabel: widget.control.getString("semantics_label"),
-          insetPadding: widget.control.getPadding("inset_padding",
+          actions: control.buildWidgets("actions"),
+          actionsPadding: control.getPadding("actions_padding"),
+          actionsAlignment: control.getMainAxisAlignment("actions_alignment"),
+          shape: control.getShape("shape", Theme.of(context)),
+          semanticLabel: control.getString("semantics_label"),
+          insetPadding: control.getPadding("inset_padding",
               const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0))!,
-          iconPadding: widget.control.getPadding("icon_padding"),
-          backgroundColor: widget.control.getColor("bgcolor", context),
-          buttonPadding: widget.control.getPadding("action_button_padding"),
-          shadowColor: widget.control.getColor("shadow_color", context),
-          elevation: widget.control.getDouble("elevation"),
+          iconPadding: control.getPadding("icon_padding"),
+          backgroundColor: control.getColor("bgcolor", context),
+          buttonPadding: control.getPadding("action_button_padding"),
+          shadowColor: control.getColor("shadow_color", context),
+          elevation: control.getDouble("elevation"),
           clipBehavior:
-              parseClip(widget.control.getString("clip_behavior"), Clip.none)!,
-          icon: widget.control.buildIconOrWidget("icon"),
-          iconColor: widget.control.getColor("icon_color", context),
-          scrollable: widget.control.getBool("scrollable", false)!,
+              parseClip(control.getString("clip_behavior"), Clip.none)!,
+          icon: control.buildIconOrWidget("icon"),
+          iconColor: control.getColor("icon_color", context),
+          scrollable: control.getBool("scrollable", false)!,
           actionsOverflowButtonSpacing:
-              widget.control.getDouble("actions_overflow_button_spacing"),
-          alignment: widget.control.getAlignment("alignment"),
-          contentTextStyle: widget.control
-              .getTextStyle("content_text_style", Theme.of(context)),
-          titleTextStyle: widget.control
-              .getTextStyle("title_text_style", Theme.of(context)),
+              control.getDouble("actions_overflow_button_spacing"),
+          alignment: control.getAlignment("alignment"),
+          contentTextStyle:
+              control.getTextStyle("content_text_style", Theme.of(context)),
+          titleTextStyle:
+              control.getTextStyle("title_text_style", Theme.of(context)),
         );
       }),
     );
   }
 
-  void _toggleDialog() {
-    debugPrint("AlertDialog build: ${widget.control.id}");
-
-    var open = widget.control.getBool("open", false)!;
-    var modal = widget.control.getBool("modal", false)!;
-
-    if (open && (open != _open)) {
-      if (widget.control.get("title") == null &&
-          widget.control.get("content") == null &&
-          widget.control.children("actions").isEmpty) {
-        _error =
-            "AlertDialog has nothing to display. Provide at minimum one of the following: title, content, actions.";
-        return;
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("AlertDialog build: ${control.id}");
+
+    var open = control.getBool("open", false)!;
+    final lastOpen = control.getBool("_open", false)!;
+    var modal = control.getBool("modal", false)!;
+
+    if (open && (open != lastOpen)) {
+      if (control.get("title") == null &&
+          control.get("content") == null &&
+          control.children("actions").isEmpty) {
+        return const ErrorControl(
+            "AlertDialog has nothing to display. Provide at minimum one of the following: title, content, actions.");
       }
 
-      _open = open;
+      control.updateProperties({"_open": open}, python: false);
 
       WidgetsBinding.instance.addPostFrameCallback((_) {
         showDialog(
             barrierDismissible: !modal,
-            barrierColor: widget.control.getColor("barrier_color", context),
+            barrierColor: control.getColor("barrier_color", context),
             useRootNavigator: false,
             context: context,
-            builder: (context) => _createAlertDialog()).then((value) {
-          debugPrint("Dismissing AlertDialog(${widget.control.id})");
-          _open = false;
-          widget.control.updateProperties({"open": false});
-          widget.control.triggerEvent("dismiss");
+            builder: (context) => _createAlertDialog(context)).then((value) {
+          debugPrint("Dismissing AlertDialog(${control.id})");
+          control.updateProperties({"_open": false}, python: false);
+          control.updateProperties({"open": false});
+          control.triggerEvent("dismiss");
         });
       });
-    } else if (!open && _open) {
-      _closeDialog();
-    }
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return _error != null ? ErrorControl(_error!) : const SizedBox.shrink();
-  }
-
-  void _closeDialog() {
-    if (_open) {
-      if (_navigatorState?.canPop() == true) {
+    } else if (!open && lastOpen) {
+      if (Navigator.of(context).canPop() == true) {
         debugPrint(
-            "AlertDialog(${widget.control.id}): Closing dialog managed by this widget.");
-        _navigatorState?.pop();
-        _open = false;
-        _error = null;
+            "AlertDialog(${control.id}): Closing dialog managed by this widget.");
+        Navigator.of(context).pop();
+        control.updateProperties({"_open": false}, python: false);
       } else {
         debugPrint(
-            "AlertDialog(${widget.control.id}): Dialog was not opened by this widget, skipping pop.");
+            "AlertDialog(${control.id}): Dialog was not opened by this widget, skipping pop.");
       }
     }
+    return const SizedBox.shrink();
   }
 }

packages/flet/lib/src/controls/banner.dart

@@ -8,114 +8,79 @@ import '../utils/numbers.dart';
 import '../utils/text.dart';
 import '../widgets/error.dart';
 
-class BannerControl extends StatefulWidget {
+class BannerControl extends StatelessWidget {
   final Control control;
 
-  BannerControl({Key? key, required this.control})
-      : super(key: key ?? ValueKey("control_${control.id}"));
+  const BannerControl({super.key, required this.control});
 
-  @override
-  State<BannerControl> createState() => _BannerControlState();
-}
-
-class _BannerControlState extends State<BannerControl> {
-  String? _error;
-
-  @override
-  void initState() {
-    super.initState();
-    debugPrint("Banner.initState: ${widget.control.id}");
-  }
-
-  @override
-  void didChangeDependencies() {
-    super.didChangeDependencies();
-    debugPrint("Banner.didChangeDependencies: ${widget.control.id}");
-    _toggleBanner();
-  }
-
-  @override
-  void didUpdateWidget(covariant BannerControl oldWidget) {
-    debugPrint("Banner.didUpdateWidget: ${widget.control.id}");
-    super.didUpdateWidget(oldWidget);
-    _toggleBanner();
-  }
-
-  MaterialBanner _createBanner() {
+  MaterialBanner _createBanner(BuildContext context) {
     return MaterialBanner(
-      leading: widget.control.buildIconOrWidget("leading"),
-      leadingPadding: widget.control.getPadding("leading_padding"),
-      content: widget.control.buildTextOrWidget("content")!,
-      padding: widget.control.getPadding("content_padding"),
-      actions: widget.control.buildWidgets("actions"),
-      forceActionsBelow: widget.control.getBool("force_actions_below", false)!,
-      backgroundColor: widget.control.getColor("bgcolor", context),
+      leading: control.buildIconOrWidget("leading"),
+      leadingPadding: control.getPadding("leading_padding"),
+      content: control.buildTextOrWidget("content")!,
+      padding: control.getPadding("content_padding"),
+      actions: control.buildWidgets("actions"),
+      forceActionsBelow: control.getBool("force_actions_below", false)!,
+      backgroundColor: control.getColor("bgcolor", context),
       contentTextStyle:
-          widget.control.getTextStyle("content_text_style", Theme.of(context)),
-      shadowColor: widget.control.getColor("shadow_color", context),
-      dividerColor: widget.control.getColor("divider_color", context),
-      elevation: widget.control.getDouble("elevation"),
-      minActionBarHeight:
-          widget.control.getDouble("min_action_bar_height", 52.0)!,
-      margin: widget.control.getMargin("margin"),
+          control.getTextStyle("content_text_style", Theme.of(context)),
+      shadowColor: control.getColor("shadow_color", context),
+      dividerColor: control.getColor("divider_color", context),
+      elevation: control.getDouble("elevation"),
+      minActionBarHeight: control.getDouble("min_action_bar_height", 52.0)!,
+      margin: control.getMargin("margin"),
       onVisible: () {
-        widget.control.triggerEvent("visible");
+        control.triggerEvent("visible");
       },
     );
   }
 
-  void _toggleBanner() {
-    var dismissed = widget.control.get("_dismissed");
-
-    debugPrint("Banner build: ${widget.control.id}, _dismissed=$dismissed");
-
-    if (dismissed == true) return;
-
-    final lastOpen = widget.control.getBool("_open", false)!;
-    var open = widget.control.getBool("open", false)!;
-
-    if (open && (open != lastOpen)) {
-      if (widget.control.get("content") == null) {
-        _error = "Banner.content must be provided and visible";
-        return;
-      } else if (widget.control.children("actions").isEmpty) {
-        _error =
-            "Banner.actions must be provided and at least one action should be visible";
-        return;
-      }
-
-      widget.control.updateProperties({"_open": open}, python: false);
-
-      WidgetsBinding.instance.addPostFrameCallback((_) {
-        ScaffoldMessenger.of(context).removeCurrentMaterialBanner();
-        ScaffoldMessenger.of(context)
-            .showMaterialBanner(_createBanner())
-            .closed
-            .then((reason) {
-          debugPrint(
-              "Closing Banner(${widget.control.id}) with reason: $reason");
-          if (widget.control.get("_dismissed") != true) {
-            widget.control
-                .updateProperties({"_dismissed": true}, python: false);
-            debugPrint(
-                "Dismissing Banner(${widget.control.id}) with reason: $reason");
-            //_open = false;
-            widget.control.updateProperties({"_open": false}, python: false);
-            widget.control.updateProperties({"open": false});
-            widget.control.triggerEvent("dismiss");
-          }
-        });
-      });
-    } else if (!open && lastOpen) {
-      WidgetsBinding.instance.addPostFrameCallback((_) {
-        ScaffoldMessenger.of(context).hideCurrentMaterialBanner();
-        widget.control.updateProperties({"_open": false}, python: false);
-      });
-    }
-  }
-
   @override
   Widget build(BuildContext context) {
-    return _error != null ? ErrorControl(_error!) : const SizedBox.shrink();
+    final dismissed = control.getBool("_dismissed", false)!;
+
+    debugPrint("Banner build: ${control.id}, _dismissed=$dismissed");
+
+    if (!dismissed) {
+      final lastOpen = control.getBool("_open", false)!;
+      var open = control.getBool("open", false)!;
+
+      if (open && (open != lastOpen)) {
+        if (control.get("content") == null) {
+          return const ErrorControl(
+              "Banner.content must be provided and visible");
+        } else if (control.children("actions").isEmpty) {
+          return const ErrorControl(
+              "Banner.actions must be provided and at least one action should be visible");
+        }
+
+        control.updateProperties({"_open": open}, python: false);
+
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          ScaffoldMessenger.of(context).removeCurrentMaterialBanner();
+          ScaffoldMessenger.of(context)
+              .showMaterialBanner(_createBanner(context))
+              .closed
+              .then((reason) {
+            debugPrint("Closing Banner(${control.id}) with reason: $reason");
+            if (control.get("_dismissed") != true) {
+              control.updateProperties({"_dismissed": true});
+              debugPrint(
+                  "Dismissing Banner(${control.id}) with reason: $reason");
+              //_open = false;
+              control.updateProperties({"_open": false}, python: false);
+              control.updateProperties({"open": false});
+              control.triggerEvent("dismiss");
+            }
+          });
+        });
+      } else if (!open && lastOpen) {
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          ScaffoldMessenger.of(context).hideCurrentMaterialBanner();
+          control.updateProperties({"_open": false}, python: false);
+        });
+      }
+    }
+    return const SizedBox.shrink();
   }
 }