Adaptive / Widescreen Mode

[jtkeyva]

If you use the Books app on an iPad, you will see that in Landscape mode, it never goes full screen and the UI adapts so that there is more viewport fraction visibility on adjacent slides/books. Not sure if the is a package thing, or a custom implementation.

Anyhow, this is a very great useful package, but it's very awkward to use in Landscape mode as is.

Thanks

[fujidaiti]

Basically, this package is for smartphones in portrait mode. Expanding the page width when scrolling is an idea to make effective use of layout space on devices with small screen widths. So , I think the normal PageView widget with a fixed viewportFraction is more suitable for large screen devices.

Or you can dynamically change the range of viewportFraction and viewportInset by creating a new ViewportConfiguration when the screen orientation changes:

// Create a new controller with a different configuration
controller = ExprollablePageController(
  initialPage: currentPage,
  viewportConfiguration: ViewportConfiguration(
    // Fix viewportFraction to 0.9
    minFraction: 0.9,
    maxFraction: 0.9,
  ),
);

// Rebuild the page view with the new controller
return ExprollablePageView(
  controller: controller,
  ...,
);

P.S.
If you still have a problem related to this, feel free to leave a comment here :)

[jtkeyva]

Thank you. Yeah, so I cannot seem to figure out how to not make it expand to take the full height of the viewport when scrolling the contents.

Also, on web, once I scroll and it takes up the full screen, I cannot scroll down to dismiss and there is no X button to exit. I feel that should be addressed since it does work on web.

Is there any way to essentially have it behave like a pageview as you described to eliminate the need to 2 different setups for mobile and web? Like can you set an Expanded max height/fraction? (Might as well have option for max width fraction too).

Thanks for the awesome package! I think the https://pub.dev/packages/wolt_modal_sheet could use some of your cool features like having the background contents panable as in your maps example :)

[fujidaiti]

how to not make it expand to take the full height of the viewport when scrolling the contents.

You may be able to do that with ViewportConfiguration.raw (I didn't try it yet, so please let me know if there are any problems):

controller = ExprollablePageController(
  initialPage: 0,
  viewportConfiguration: ViewportConfiguration.raw(
    // Fix viewportFraction to 0.9
    minFraction: 0.9,
    maxFraction: 0.9,
    // Also use a fixed viewportInset 
    minInset = ViewportInset.shrunk,
    maxInset = ViewportInset.shrunk,
    shrunkInset = ViewportInset.shrunk,
    expandedInset = ViewportInset.shrunk,
    initialInset = ViewportInset.shrunk,
    this.snapInsets = const [ViewportInset.shrunk],
  ),
);

Also, on web, once I scroll and it takes up the full screen, I cannot scroll down to dismiss and there is no X button to exit. I feel that should be addressed since it does work on web.

This is a known issue (#37) and related to mouse wheel scrolling (it works fine on mobile browsers with finger gestures). I'm looking for a good workaround, but so far there is none 😞

I think the pub.dev/packages/wolt_modal_sheet could use some of your cool features like having the background contents panable as in your maps example :)

Thanks, I'll take a look 😁

[fujidaiti]

I decided to implement the landscape mode (see #37 (comment)).

[jtkeyva]

Awesome! I look forward to 1.0. Happy to test and review pre-release