Merge pull request #1405 from EnsembleUI/bottom_sheet

Add snaps to Bottom Sheet

Author: vusters

integration_test/local/dialog/Toast.yaml renamed to integration_test/local/dialogsAndToast/Toast.yaml

@@ -8,7 +8,7 @@ import '../framework/test_helper.dart';
 void main() {
   late EnsembleConfig config;
   setUpAll(() async {
-    config = await TestHelper.setupApp(appName: 'dialog');
+    config = await TestHelper.setupApp(appName: 'dialogsAndToast');
   });
 
   group('Testing Toast', () {

integration_test/local/dialog_test.dart renamed to integration_test/local/dialogsAndToast_test.dart

@@ -1,3 +1,4 @@
+import 'package:collection/collection.dart';
 import 'package:ensemble/framework/action.dart';
 import 'package:ensemble/framework/data_context.dart';
 import 'package:ensemble/framework/error_handling.dart';
@@ -21,6 +22,8 @@ class ShowBottomSheetAction extends EnsembleAction {
   });
 
   static const defaultTopBorderRadius = Radius.circular(16);
+  static const dragHandleHeight = 3.0;
+  static const dragHandleVerticalMargin = 10.0;
 
   final Map payload;
   final dynamic body;
@@ -85,6 +88,14 @@ class ShowBottomSheetAction extends EnsembleAction {
       min: 0,
       max: 1);
 
+  bool isSnap(scopeManager) =>
+      Utils.optionalBool(
+          eval(payload["scrollOptions"]?["snap"], scopeManager)) ??
+      false;
+
+  List<double>? additionalSnaps(scopeManager) => Utils.getList<double>(
+      eval(payload["scrollOptions"]?["additionalViewportSnaps"], scopeManager));
+
   @override
   Future<dynamic> execute(BuildContext context, ScopeManager scopeManager) {
     if (body != null) {
@@ -123,7 +134,21 @@ class ShowBottomSheetAction extends EnsembleAction {
   }
 
   Widget getBodyWidget(ScopeManager scopeManager, BuildContext context) {
-    var widget = scopeManager.buildWidgetFromDefinition(body);
+    // We have to handle the BottomSheet's padding directly around the widget,
+    // such that it is inside the Scrollable area to be able to move up and down.
+    var sheetPadding = padding(scopeManager) ?? EdgeInsets.zero;
+
+    // account for the drag handle
+    if (showDragHandle(scopeManager)) {
+      var additionalPaddingTop =
+          dragHandleVerticalMargin * 2 + dragHandleHeight;
+      sheetPadding =
+          sheetPadding.copyWith(top: sheetPadding.top + additionalPaddingTop);
+    }
+
+    var widget = Padding(
+        padding: sheetPadding,
+        child: scopeManager.buildWidgetFromDefinition(body));
 
     if (isScrollable(scopeManager) == true) {
       // fix the viewport numbers if used incorrectly
@@ -140,14 +165,22 @@ class ShowBottomSheetAction extends EnsembleAction {
         initialViewport = (minViewport + maxViewport) / 2.0;
       }
 
+      bool useSnap = isSnap(scopeManager);
+      List<double>? snaps = additionalSnaps(scopeManager)
+          ?.where((item) => item > minViewport && item < maxViewport)
+          .toList();
+      snaps?.sort();
+
       // On platforms with a mouse (Web/desktop), there is no min/maxViewport due to platform consistency,
       // so the height will be fixed to initialViewport, and content will just scroll within it.
       // https://docs.flutter.dev/release/breaking-changes/default-scroll-behavior-drag
       return DraggableScrollableSheet(
-          expand: false,
+          expand: true,
           minChildSize: minViewport,
           maxChildSize: maxViewport,
           initialChildSize: initialViewport,
+          snap: useSnap,
+          snapSizes: useSnap ? snaps : null,
           builder: (context, scrollController) =>
               buildRootContainer(scopeManager, context,
                   child: SingleChildScrollView(
@@ -164,8 +197,6 @@ class ShowBottomSheetAction extends EnsembleAction {
   Widget buildRootContainer(ScopeManager scopeManager, BuildContext context,
       {required Widget child, required bool isScrollable}) {
     Widget rootWidget = Container(
-        margin: margin(scopeManager),
-        padding: padding(scopeManager),
         decoration: BoxDecoration(
             color: getBackgroundColor(scopeManager) ??
                 Theme.of(context).dialogBackgroundColor,
@@ -185,14 +216,17 @@ class ShowBottomSheetAction extends EnsembleAction {
         children: [rootWidget, _buildDragHandle(scopeManager)],
       );
     }
-    return rootWidget;
+    // This is the Margin of the bottom sheet.
+    // Padding will be handled separately inside the scrollable area
+    return Padding(
+        padding: margin(scopeManager) ?? EdgeInsets.zero, child: rootWidget);
   }
 
   Widget _buildDragHandle(ScopeManager scopeManager) {
     return Container(
-      margin: const EdgeInsets.only(top: 10),
+      margin: const EdgeInsets.only(top: dragHandleVerticalMargin),
       width: 32,
-      height: 3,
+      height: dragHandleHeight,
       decoration: BoxDecoration(
         color: dragHandleColor(scopeManager) ?? Colors.grey[500],
         borderRadius: BorderRadius.circular(12),

lib/action/bottom_sheet_actions.dart

@@ -261,10 +261,12 @@ class Utils {
   }
 
   static List<T>? getList<T>(dynamic value) {
-    if (value is YamlList) {
+    if (value is List) {
       List<T> results = [];
       for (var item in value) {
-        results.add(item);
+        if (item is T) {
+          results.add(item);
+        }
       }
       return results;
     }
@@ -693,6 +695,8 @@ class Utils {
       } else if (values.length == 2) {
         left = right = (parseIntFromString(values[1]) ?? 0).toDouble();
         bottom = top;
+      } else {
+        left = right = bottom = top;
       }
       return EdgeInsets.only(
           top: top, right: right, bottom: bottom, left: left);

lib/util/utils.dart

@@ -152,7 +152,7 @@ flutter:
     # integration tests (TODO - exclude from build)
     - integration_test/local/defaultApp/
     - integration_test/local/themedApp/
-    - integration_test/local/dialog/
+    - integration_test/local/dialogsAndToast/
 
   fonts:
     # icon fonts