Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add resizeToAvoidBottomInset Option to WoltModalSheet to Control Keyboard Overlay Behavior #163

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ class NonScrollingWoltModalSheetPage extends SliverWoltModalSheetPage {
super.leadingNavBarWidget,
super.trailingNavBarWidget,
super.hasTopBarLayer = false,
super.resizeToAvoidBottomInset,
super.topBar,
super.topBarTitle,
super.navBarHeight,
Expand Down
13 changes: 13 additions & 0 deletions lib/src/modal_page/sliver_wolt_modal_sheet_page.dart
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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,
Expand All @@ -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");
}
1 change: 1 addition & 0 deletions lib/src/modal_page/wolt_modal_sheet_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ class WoltModalSheetPage extends SliverWoltModalSheetPage {
super.sabGradientColor,
super.enableDrag,
super.forceMaxHeight = false,
super.resizeToAvoidBottomInset,
super.isTopBarLayerAlwaysVisible,
super.hasTopBarLayer,
super.scrollController,
Expand Down
3 changes: 3 additions & 0 deletions lib/src/theme/wolt_modal_sheet_default_theme_data.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
17 changes: 17 additions & 0 deletions lib/src/theme/wolt_modal_sheet_theme_data.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -185,6 +197,7 @@ class WoltModalSheetThemeData extends ThemeExtension<WoltModalSheetThemeData> {
Clip? clipBehavior,
ScrollPhysics? mainContentScrollPhysics,
WoltModalSheetAnimationStyle? animationStyle,
bool? resizeToAvoidBottomInset,
}) {
return WoltModalSheetThemeData(
backgroundColor: backgroundColor ?? this.backgroundColor,
Expand Down Expand Up @@ -214,6 +227,8 @@ class WoltModalSheetThemeData extends ThemeExtension<WoltModalSheetThemeData> {
mainContentScrollPhysics:
mainContentScrollPhysics ?? this.mainContentScrollPhysics,
animationStyle: animationStyle ?? this.animationStyle,
resizeToAvoidBottomInset:
resizeToAvoidBottomInset ?? this.resizeToAvoidBottomInset,
);
}

Expand All @@ -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:
Expand Down
4 changes: 4 additions & 0 deletions lib/src/wolt_modal_sheet.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -341,6 +344,7 @@ class _WoltModalSheetState extends State<WoltModalSheet> {
],
);
return Scaffold(
resizeToAvoidBottomInset: resizeToAvoidBottomInset,
backgroundColor: Colors.transparent,
body: widget.useSafeArea
? Stack(
Expand Down
Loading