SliverWoltModalSheetPage class

The page classes are responsible for creating a modal sheet page within the context of the WoltModalSheet. It's designed to represent a visually layered structure with clear navigation and content display.

The structure is organized across layers on the z-axis:

  1. Main Content Layer: The fundamental content of the page, including the optional page title, optional hero image, and the main content, which may be scrollable.
  2. Top Bar Layer: Further above the main content layer, this layer with the filled color includes the top bar title and may become hidden or sticky based on scroll position and specific properties.
  3. Navigation Bar Layer: Sitting at the top of the top bar layer on z-axis, this transparent-background layer contains navigational widgets for the interface, such as back or close buttons.
  4. Sticky Action Bar Layer: Positioned at the top of the z axis, this layer guides the user towards the next step, uses an optional gentle gradient on top to hint that there is more content below ready for scrolling.

By organizing these components across distinct layers, the class facilitates a clear and intuitive user experience, with flexible customization options for various use cases.

SliverWoltModalSheetPage utilizes Flutter's sliver widgets for its main content, built with mainContentSliversBuilder. Slivers are specialized Flutter widgets that create elements with custom scroll effects and are a fundamental part of creating advanced scrollable layouts.

The use of slivers in this context offers several key advantages:

  1. Efficient On-Demand Rendering: Slivers render their items lazily, meaning they only build and render items that are currently visible within the viewport. This approach is highly efficient for scrollable lists or content areas with many items, as it optimizes both memory usage and performance, especially for long or infinitely scrolling lists.

  2. Custom Scroll Effects: Slivers enable the creation of custom scroll effects and behaviors. This is particularly useful in the context of a modal sheet, where customized scrolling behavior can enhance the user experience. For instance, parallax effects, sticky headers, or collapsing toolbars can be seamlessly implemented using slivers.

  3. Flexible Layout Structures: Slivers provide flexibility in layout design, allowing for dynamic arrangements of components in a scrollable area. This flexibility is crucial for SliverWoltModalSheetPage as it needs to adapt to various content structures and user interactions within the modal sheet.

  4. Integration with CustomScrollView: Using slivers allows SliverWoltModalSheetPage to integrate seamlessly with CustomScrollView, a widget designed to create custom scroll effects with slivers.

Constructors

SliverWoltModalSheetPage({required List<Widget> mainContentSliversBuilder(BuildContext context), Object? id, Widget? pageTitle, double? navBarHeight, Widget? topBarTitle, Widget? topBar, Widget? heroImage, double? heroImageHeight, Color? backgroundColor, Color? surfaceTintColor, bool? hasSabGradient, bool? enableDrag, Color? sabGradientColor, bool forceMaxHeight = false, ScrollController? scrollController, Widget? stickyActionBar, Widget? leadingNavBarWidget, Widget? trailingNavBarWidget, bool? hasTopBarLayer, bool? isTopBarLayerAlwaysVisible, bool? resizeToAvoidBottomInset, bool? useSafeArea})
Creates a page to be built within WoltScrollableModalSheet.
const

Properties

backgroundColor → Color?
The background color of the page.
final
enableDrag → bool?
Controls the draggability of the bottom sheet. This setting overrides the value provided via WoltModalSheet.show specifically for this page when the modal is displayed as a bottom sheet.
final
forceMaxHeight → bool
Indicates whether the page height should be at maximum even if the content size is smaller.
final
hashCode → int
The hash code for this object.
no setterinherited
hasSabGradient → bool?
Indicates whether a gentle gradient overlay should be rendered above the stickyActionBar. The purpose of this gradient is to visually suggest to the user that additional content might be present below the action bar.
final
hasTopBarLayer → bool?
On z axis, the Top Bar layer resides above the main content layer and below the transparent navigation bar layer.
final
heroImage → Widget?
A Widget representing the hero image displayed on top of the main content. A Hero Image is positioned at the top of the main content. This widget immediately grabs the user's attention, effectively conveying the primary theme or message of the content.
final
heroImageHeight → double?
The height of the heroImage.
final
id → Object?
An object representing the identity of this page.
final
isTopBarLayerAlwaysVisible → bool?
Indicates whether the top bar should always remain visible, regardless of the page scroll position. When set to true, the top bar will be permanently displayed; when false, it may be hidden or revealed based on the page's scrolling behavior.
final
leadingNavBarWidget → Widget?
A widget representing leading widget in the navigation toolbar. This widget is usually a the back button.
final
mainContentSliversBuilder → List<Widget> Function(BuildContext context)
Use this method to dynamically build the list of sliver widgets within the modal sheet based on the available BuildContext. This approach is more flexible and recommended for most use cases.
final
Height of the navigation bar. This value will also be the height of the top bar.
final
pageTitle → Widget?
Represents the widget that stands for the page title. A page title above the main content provides users with a quick understanding of what to expect from the page. As the user scrolls, this title becomes hidden, at which point the top bar title continues to serve this context-providing purpose.
final
resizeToAvoidBottomInset → bool?
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.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
sabGradientColor → Color?
The color of the gentle gradient overlay that is rendered above the stickyActionBar. The purpose of this gradient is to visually suggest to the user that additional content might be present below the action bar.
final
scrollController → ScrollController?
A ScrollController that controls the scrolling behavior of the page.
final
stickyActionBar → Widget?
A widget representing the action widgets located at the bottom of the page.
final
surfaceTintColor → Color?
The color of the surface tint overlay applied to the material color to indicate elevation for the modal sheet page. The surfaceTintColor is applied to the modal sheet background color, top bar color, and the sticky action bar wrapper colors.
final
topBar → Widget?
An optional Widget representing the top bar.
final
topBarTitle → Widget?
A Widget representing the title displayed in the top bar.
final
trailingNavBarWidget → Widget?
A widget representing trailing widget in the navigation toolbar. This widget is usually a the close button.
final
useSafeArea → bool?
A boolean that determines whether the modal should avoid system UI intrusions such as the notch and system gesture areas.
final

Methods

copyWith({Object? id, Widget? pageTitle, Widget? topBarTitle, Widget? topBar, bool? hasTopBarLayer, bool? isTopBarLayerAlwaysVisible, List<Widget> mainContentSliversBuilder(BuildContext context)?, Widget? heroImage, double? heroImageHeight, Color? backgroundColor, Color? surfaceTintColor, double? navBarHeight, bool? forceMaxHeight, ScrollController? scrollController, Widget? stickyActionBar, bool? hasSabGradient, bool? enableDrag, Color? sabGradientColor, Widget? leadingNavBarWidget, Widget? trailingNavBarWidget, bool? resizeToAvoidBottomInset, bool? useSafeArea}) → SliverWoltModalSheetPage
copyWithChild({required Widget child, Object? id, Widget? pageTitle, Widget? topBarTitle, Widget? topBar, bool? hasTopBarLayer, bool? isTopBarLayerAlwaysVisible, Widget? heroImage, double? heroImageHeight, Color? backgroundColor, Color? surfaceTintColor, double? navBarHeight, bool? forceMaxHeight, ScrollController? scrollController, Widget? stickyActionBar, bool? hasSabGradient, bool? enableDrag, Color? sabGradientColor, Widget? leadingNavBarWidget, Widget? trailingNavBarWidget, bool? resizeToAvoidBottomInset, bool? useSafeArea}) → SliverWoltModalSheetPage
Creates a SliverWoltModalSheetPage from a page whose main content is provided as a single widget.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited