Dismissible Control (#2124)

* initial commit

* add `dismissible.dart`

* remove `key` – add docstring

* remove `key` – add docstring

* update key

* move from `Control` to `ConstrainedControl`

---------

Co-authored-by: Feodor Fitsner <feodor@appveyor.com>

Author: ndonkoHenri

package/lib/src/controls/create_control.dart

@@ -29,7 +29,7 @@ import 'column.dart';
 import 'container.dart';
 import 'datatable.dart';
 import 'date_picker.dart';
-import 'time_picker.dart';
+import 'dismissible.dart';
 import 'divider.dart';
 import 'drag_target.dart';
 import 'draggable.dart';
@@ -74,6 +74,7 @@ import 'tabs.dart';
 import 'text.dart';
 import 'text_button.dart';
 import 'textfield.dart';
+import 'time_picker.dart';
 import 'tooltip.dart';
 import 'transparent_pointer.dart';
 import 'vertical_divider.dart';
@@ -501,6 +502,12 @@ Widget createWidget(Key? key, ControlViewModel controlView, Control? parent,
           children: controlView.children,
           parentDisabled: parentDisabled,
           nextChild: nextChild);
+    case "dismissible":
+      return DismissibleControl(
+          parent: parent,
+          control: controlView.control,
+          children: controlView.children,
+          parentDisabled: parentDisabled);
     case "alertdialog":
       return AlertDialogControl(
           parent: parent,

package/lib/src/controls/dismissible.dart

@@ -0,0 +1,89 @@
+import 'package:collection/collection.dart';
+import 'package:flet/src/utils/dismissible.dart';
+import 'package:flutter/material.dart';
+
+import '../flet_app_services.dart';
+import '../models/control.dart';
+import 'create_control.dart';
+import 'error.dart';
+
+class DismissibleControl extends StatelessWidget {
+  final Control? parent;
+  final Control control;
+  final List<Control> children;
+  final bool parentDisabled;
+
+  const DismissibleControl(
+      {Key? key,
+      this.parent,
+      required this.control,
+      required this.children,
+      required this.parentDisabled})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    var server = FletAppServices.of(context).server;
+    debugPrint("Dismissible build: ${control.id}");
+
+    bool disabled = control.isDisabled || parentDisabled;
+    var contentCtrls = children.where((c) => c.name == "content");
+
+    if (contentCtrls.isEmpty) {
+      return const ErrorControl("Dismissible does not have a content.");
+    }
+
+    var backgroundCtrls = children.where((c) => c.name == "background");
+
+    var secondaryBackgroundCtrls =
+        children.where((c) => c.name == "secondaryBackground");
+
+    SnackBarBehavior? behavior = SnackBarBehavior.values.firstWhereOrNull((a) =>
+        a.name.toLowerCase() ==
+        control.attrString("behavior", "")!.toLowerCase());
+
+    var dismissThresholds =
+        parseDismissThresholds(control, "dismissThresholds");
+
+    DismissDirection? direction = DismissDirection.values.firstWhere(
+        (a) =>
+            a.name.toLowerCase() ==
+            control.attrString("dismissDirection", "")!.toLowerCase(),
+        orElse: () => DismissDirection.horizontal);
+
+    return constrainedControl(
+        context,
+        Dismissible(
+        key: ValueKey<String>(control.id),
+        direction: direction,
+        background: backgroundCtrls.isNotEmpty
+            ? createControl(control, backgroundCtrls.first.id, disabled)
+            : Container(color: Colors.transparent),
+        secondaryBackground: secondaryBackgroundCtrls.isNotEmpty
+            ? createControl(
+                control, secondaryBackgroundCtrls.first.id, disabled)
+            : Container(color: Colors.transparent),
+        onDismissed: (DismissDirection d) {
+          server.sendPageEvent(
+              eventTarget: control.id, eventName: "dismiss", eventData: "");
+        },
+        onResize: () {
+          server.sendPageEvent(
+              eventTarget: control.id, eventName: "resize", eventData: "");
+        },
+        onUpdate: (DismissUpdateDetails d) {
+          server.sendPageEvent(
+              eventTarget: control.id, eventName: "update", eventData: "");
+        },
+        // confirmDismiss: // TODO: implement
+        movementDuration:
+            Duration(milliseconds: control.attrInt("duration", 200)!),
+        resizeDuration:
+            Duration(milliseconds: control.attrInt("resizeDuration", 300)!),
+        crossAxisEndOffset: control.attrDouble("crossAxisEndOffset", 0.0)!,
+        dismissThresholds: dismissThresholds ?? {},
+        child: createControl(control, contentCtrls.first.id, disabled)),
+        parent,
+        control);
+  }
+}

package/lib/src/utils/dismissible.dart

@@ -0,0 +1,62 @@
+import 'dart:convert';
+
+import 'package:flet/src/utils/numbers.dart';
+import 'package:flutter/material.dart';
+
+import '../models/control.dart';
+
+Map<DismissDirection, double>? parseDismissThresholds(
+    Control control, String propName) {
+  var v = control.attrString(propName, null);
+  if (v == null) {
+    return null;
+  }
+
+  final j1 = json.decode(v);
+  return getDismissThresholds(j1, (jv) => parseDouble(jv));
+}
+
+Map<DismissDirection, double>? getDismissThresholds<T>(
+    dynamic jsonDictValue, T Function(dynamic) converterFromJson) {
+  if (jsonDictValue == null) {
+    return null;
+  }
+  var j = jsonDictValue;
+  if (j is! Map<String, dynamic>) {
+    j = {"": j};
+  }
+
+  return getDismissThresholdsFromJSON(j, converterFromJson);
+}
+
+Map<DismissDirection, double> getDismissThresholdsFromJSON(
+    Map<String, dynamic>? jsonDictValue, Function(dynamic) converterFromJson) {
+  Map<DismissDirection, double> dismissDirectionMap = {};
+
+  Set<DismissDirection> directions = {
+    DismissDirection.vertical,
+    DismissDirection.horizontal,
+    DismissDirection.endToStart,
+    DismissDirection.startToEnd,
+    DismissDirection.up,
+    DismissDirection.down
+  };
+
+  if (jsonDictValue != null) {
+    jsonDictValue.forEach((directionStr, jv) {
+      directionStr
+          .split(",")
+          .map((s) => s.trim().toLowerCase())
+          .forEach((state) {
+        DismissDirection d = directions.firstWhere(
+            (e) => e.name.toLowerCase() == state,
+            orElse: () => DismissDirection.none);
+        if (d != DismissDirection.none) {
+          dismissDirectionMap[d] = converterFromJson(jv);
+        }
+      });
+    });
+  }
+
+  return dismissDirectionMap;
+}

sdk/python/packages/flet-core/src/flet_core/__init__.py

@@ -68,6 +68,7 @@
     DataTable,
 )
 from flet_core.date_picker import DatePicker, DatePickerMode, DatePickerEntryMode
+from flet_core.dismissible import Dismissible
 from flet_core.divider import Divider
 from flet_core.drag_target import DragTarget, DragTargetAcceptEvent
 from flet_core.draggable import Draggable