Merge pull request #163 from woltapp/issue-154-add-functionality-to-r…

…esize-to-avoid-bottom-inset

Add resizeToAvoidBottomInset Option to WoltModalSheet to Control Keyboard Overlay Behavior

lib/src/modal_page/non_scrolling_wolt_modal_sheet_page.dart

@@ -30,6 +30,7 @@ class NonScrollingWoltModalSheetPage extends SliverWoltModalSheetPage {
     super.leadingNavBarWidget,
     super.trailingNavBarWidget,
     super.hasTopBarLayer = false,
+    super.resizeToAvoidBottomInset,
     super.topBar,
     super.topBarTitle,
     super.navBarHeight,

lib/src/modal_page/sliver_wolt_modal_sheet_page.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:wolt_modal_sheet/src/theme/wolt_modal_sheet_default_theme_data.dart';
 import 'package:wolt_modal_sheet/src/wolt_modal_sheet.dart';
 
 /// The page classes are responsible for creating a modal sheet page within the context of the
@@ -200,6 +201,17 @@ class SliverWoltModalSheetPage {
   /// a the close button.
   final Widget? trailingNavBarWidget;
 
+  /// If there is an onscreen keyboard displayed above the
+  /// modal sheet, the main content can be resized to avoid overlapping the keyboard, which
+  /// prevents widgets inside the main content from being obscured by the keyboard.
+  ///
+  /// WoltModalSheet internally uses a [Scaffold] to provide this functionality and to handle the
+  /// safe area color for the modal sheet. Setting this value will set the same value inside the
+  /// internal [Scaffold] of the modal sheet.
+  ///
+  /// The default value is set in [WoltModalSheetDefaultThemeData.resizeToAvoidBottomInset].
+  final bool? resizeToAvoidBottomInset;
+
   /// Creates a page to be built within [WoltScrollableModalSheet].
   const SliverWoltModalSheetPage({
     required this.mainContentSlivers,
@@ -221,6 +233,7 @@ class SliverWoltModalSheetPage {
     this.trailingNavBarWidget,
     this.hasTopBarLayer,
     this.isTopBarLayerAlwaysVisible,
+    this.resizeToAvoidBottomInset,
   }) : assert(!(topBar != null && hasTopBarLayer == false),
             "When topBar is provided, hasTopBarLayer must not be false");
 }

lib/src/modal_page/wolt_modal_sheet_page.dart

@@ -55,6 +55,7 @@ class WoltModalSheetPage extends SliverWoltModalSheetPage {
     super.sabGradientColor,
     super.enableDrag,
     super.forceMaxHeight = false,
+    super.resizeToAvoidBottomInset,
     super.isTopBarLayerAlwaysVisible,
     super.hasTopBarLayer,
     super.scrollController,

lib/src/theme/wolt_modal_sheet_default_theme_data.dart

@@ -69,6 +69,9 @@ class WoltModalSheetDefaultThemeData extends WoltModalSheetThemeData {
   @override
   bool get enableDrag => true;
 
+  @override
+  bool get resizeToAvoidBottomInset => true;
+
   @override
   Color get dragHandleColor => _colorsScheme.onSurfaceVariant.withOpacity(0.4);
 

lib/src/theme/wolt_modal_sheet_theme_data.dart

@@ -34,6 +34,7 @@ class WoltModalSheetThemeData extends ThemeExtension<WoltModalSheetThemeData> {
     this.shadowColor,
     this.mainContentScrollPhysics,
     this.animationStyle,
+    this.resizeToAvoidBottomInset,
   });
 
   /// The color of the surface tint overlay applied to the material color
@@ -158,6 +159,17 @@ class WoltModalSheetThemeData extends ThemeExtension<WoltModalSheetThemeData> {
   /// Motion animation styles for both pagination and scrolling animations.
   final WoltModalSheetAnimationStyle? animationStyle;
 
+  /// If there is an onscreen keyboard displayed above the
+  /// modal sheet, the main content can be resized to avoid overlapping the keyboard, which
+  /// prevents widgets inside the main content from being obscured by the keyboard.
+  ///
+  /// WoltModalSheet internally uses a [Scaffold] to provide this functionality and to handle the
+  /// safe area color for the modal sheet. Setting this value will set the same value inside the
+  /// internal [Scaffold] of the modal sheet.
+  ///
+  /// Defaults to true.
+  final bool? resizeToAvoidBottomInset;
+
   @override
   WoltModalSheetThemeData copyWith({
     Color? backgroundColor,
@@ -185,6 +197,7 @@ class WoltModalSheetThemeData extends ThemeExtension<WoltModalSheetThemeData> {
     Clip? clipBehavior,
     ScrollPhysics? mainContentScrollPhysics,
     WoltModalSheetAnimationStyle? animationStyle,
+    bool? resizeToAvoidBottomInset,
   }) {
     return WoltModalSheetThemeData(
       backgroundColor: backgroundColor ?? this.backgroundColor,
@@ -214,6 +227,8 @@ class WoltModalSheetThemeData extends ThemeExtension<WoltModalSheetThemeData> {
       mainContentScrollPhysics:
           mainContentScrollPhysics ?? this.mainContentScrollPhysics,
       animationStyle: animationStyle ?? this.animationStyle,
+      resizeToAvoidBottomInset:
+          resizeToAvoidBottomInset ?? this.resizeToAvoidBottomInset,
     );
   }
 
@@ -225,6 +240,8 @@ class WoltModalSheetThemeData extends ThemeExtension<WoltModalSheetThemeData> {
       backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t),
       modalElevation: lerpDouble(modalElevation, other.modalElevation, t),
       showDragHandle: t < 0.5 ? showDragHandle : other.showDragHandle,
+      resizeToAvoidBottomInset:
+          t < 0.5 ? resizeToAvoidBottomInset : other.resizeToAvoidBottomInset,
       modalBarrierColor:
           Color.lerp(modalBarrierColor, other.modalBarrierColor, t),
       bottomSheetShape:

lib/src/wolt_modal_sheet.dart

@@ -271,6 +271,9 @@ class _WoltModalSheetState extends State<WoltModalSheet> {
                   themeData?.modalElevation ?? defaultThemeData.modalElevation;
               final clipBehavior =
                   themeData?.clipBehavior ?? defaultThemeData.clipBehavior;
+              final resizeToAvoidBottomInset = page.resizeToAvoidBottomInset ??
+                  themeData?.resizeToAvoidBottomInset ??
+                  defaultThemeData.resizeToAvoidBottomInset;
 
               final multiChildLayout = CustomMultiChildLayout(
                 delegate: WoltModalMultiChildLayoutDelegate(
@@ -341,6 +344,7 @@ class _WoltModalSheetState extends State<WoltModalSheet> {
                 ],
               );
               return Scaffold(
+                resizeToAvoidBottomInset: resizeToAvoidBottomInset,
                 backgroundColor: Colors.transparent,
                 body: widget.useSafeArea
                     ? Stack(