Skip to content

Commit

Permalink
Introduce resize-to-avoid-bottom-inset flag to modal page
Browse files Browse the repository at this point in the history
  • Loading branch information
ulusoyca committed Mar 13, 2024
1 parent b5c5f24 commit 540e201
Show file tree
Hide file tree
Showing 7 changed files with 40 additions and 0 deletions.
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 @@ -32,6 +32,7 @@ class WoltModalSheetThemeData extends ThemeExtension<WoltModalSheetThemeData> {
this.clipBehavior,
this.shadowColor,
this.mainContentScrollPhysics,
this.resizeToAvoidBottomInset,
});

/// The color of the surface tint overlay applied to the material color
Expand Down Expand Up @@ -153,6 +154,17 @@ class WoltModalSheetThemeData extends ThemeExtension<WoltModalSheetThemeData> {
/// The default value for [WoltModalSheet] scrollPhysics in the main content.
final ScrollPhysics? mainContentScrollPhysics;

/// 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 All @@ -179,6 +191,7 @@ class WoltModalSheetThemeData extends ThemeExtension<WoltModalSheetThemeData> {
Color? shadowColor,
Clip? clipBehavior,
ScrollPhysics? mainContentScrollPhysics,
bool? resizeToAvoidBottomInset,
}) {
return WoltModalSheetThemeData(
backgroundColor: backgroundColor ?? this.backgroundColor,
Expand Down Expand Up @@ -207,6 +220,8 @@ class WoltModalSheetThemeData extends ThemeExtension<WoltModalSheetThemeData> {
clipBehavior: clipBehavior ?? this.clipBehavior,
mainContentScrollPhysics:
mainContentScrollPhysics ?? this.mainContentScrollPhysics,
resizeToAvoidBottomInset:
resizeToAvoidBottomInset ?? this.resizeToAvoidBottomInset,
);
}

Expand All @@ -218,6 +233,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
1 change: 1 addition & 0 deletions playground/lib/home/pages/sheet_page_with_text_field.dart
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ class SheetPageWithTextField {
isButtonEnabledNotifier.value = textEditingController.text.isNotEmpty;
});
return WoltModalSheetPage(
resizeToAvoidBottomInset: true,
stickyActionBar: ValueListenableBuilder<bool>(
valueListenable: isButtonEnabledNotifier,
builder: (_, isEnabled, __) {
Expand Down

0 comments on commit 540e201

Please sign in to comment.