Add NonScrollingWoltModalSheetPage page type

[ulusoyca]

Description

This PR introduces a new page type, NonScrollingWoltModalSheetPage, to the WoltModalSheet package. The new page type extends the existing SliverWoltModalSheetPage and is tailored for content that adapts to available vertical space without the necessity for scrolling. This enhancement is made to support the use cases where the content is flexible in height but does not exceed the modal sheet's maximum height.

This addition came from the need to have a modal sheet page type that better suits content that is unlikely to require scrolling. This is particularly useful for modal content that dynamically sizes itself to the remaining space but remains within the viewport constraints, such as dynamic forms, confirmation dialogs, or any content with adaptive height requirements.

If content has a risk of exceeding the modal sheet's height, it is advisable to use SliverWoltModalSheetPage or WoltModalSheetPage for their scrolling capabilities.

Key Features

• Flex Layout Compatibility: The new page type utilizes a Column with Flexible widgets, allowing content to stretch or compress based on the modal's height.

• No Scroll Requirement: It's optimized for scenarios where the content fits within the viewport, making it an efficient choice for fixed or intrinsic sized content.

• Simplified Content Specification: Developers can pass a single Widget as the main content, making the API cleaner and more intuitive.

Implementation Notes

FlexibleWoltModalSheetPage passes a SliverFillViewport with a single child to mainContentSlivers, ensuring that the content is laid out correctly within the modal sheet.
Default values and behavior are inherited from SliverWoltModalSheetPage, maintaining consistency within the package.

Usage Example

The code snippet below produces the screenshots attached in bottomsheet type. The dialog example shows the configuration without top bar.

return NonScrollingWoltModalSheetPage(
      leadingNavBarWidget: WoltModalSheetBackButton(onBackPressed: onBackPressed),
      trailingNavBarWidget: WoltModalSheetCloseButton(onClosed: onClosed),
      hasTopBarLayer: true,
      navBarHeight: 72.0,
      topBarTitle: const Text('Non-scrolling page'),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          const Flexible(
            flex: 2,
            child: Center(
              child: Text('Flex: 2', style: textStyle),
            ),
          ),
          const Flexible(
            flex: 3,
            child: ColoredBox(
              color: Colors.amber,
              child: Center(child: Text('Flex: 3', style: textStyle)),
            ),
          ),
          Flexible(
            flex: 1,
            child: GestureDetector(
              onTap: isLastPage ? onClosed : nextPagePressed,
              child: ColoredBox(
                color: Colors.green,
                child: Center(
                  child: Text(
                    "Flex: 1\n Tap here to ${isLastPage ? 'close' : 'go to the next page'}",
                    style: textStyle,
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );

Bottom sheet	Dialog

How to test

Use the playground app, and select WoltFlexibleSheetPage example

[MbIXjkee]

What is flexible here?

[ulusoyca]

@MbIXjkee As agreed, I renamed this class to NonScrollingWoltModalSheetPage. Check the commit: c48c897

[MbIXjkee]

LGTM