Custom Animation Styles for WoltModalSheet by using

[ulusoyca]

Description

This PR allows developers to customize the animation styles for both scrolling and pagination within the WoltModalSheet by using the new WoltModalSheetAnimationStyle class.

The core of this feature is the introduction of the WoltModalSheetAnimationStyle class, which encompasses two key aspects:

• Pagination Animations: Customize how the modal sheet animates during page transitions. This includes settings for main content opacity, modal sheet height transition, and the sticky action bar (SAB) opacity, among others.
• Scrolling Animations: Defines animations related to scrolling within the modal sheet. If the the top visibility is set to change as the user scrolls, the WoltModalSheetScrollAnimationStyle covers hero image scaling, top bar translation, and more.

These animations are applied through the WoltModalSheetThemeData.

Example Configuration

WoltModalSheetThemeData(
  animationStyle: WoltModalSheetAnimationStyle(
    paginationAnimationStyle: WoltModalSheetPaginationAnimationStyle(
      mainContentIncomingOpacityCurve: const Interval(
        150 / 350,
        350 / 350,
        curve: Curves.linear,
      ),
      modalSheetHeightTransitionCurve: const Interval(
        0 / 350,
        300 / 350,
        curve: Curves.fastOutSlowIn,
      ),
      incomingSabOpacityCurve: const Interval(
        100 / 350,
        300 / 350,
        curve: Curves.linear,
      ),
      // Define additional pagination animation styles as needed.
    ),
    scrollAnimationStyle: WoltModalSheetScrollAnimationStyle(
      heroImageScaleStart: 1.0,
      heroImageScaleEnd: 0.9,
      topBarTitleTranslationYInPixels: 8.0,
      topBarTranslationYInPixels: 4.0,
      // Define additional scroll animation styles as needed.
    ),
  ),
),

Pagination	Scrolling
pagination_animation.mp4	scrolling_anim.mp4

Related Issues

• Add control for sheet insert animation Duration and Curve #131
• Unexpected image cropping in WoltModalSheetPage heroImage #125 (This is fixed by disabling the image scaling by default.)

Checklist

Before you create this PR confirm that it meets all requirements listed below by checking the relevant checkboxes ([x]).
This will ensure a smooth and quick review process.

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• My PR includes tests for all changed/updated/fixed behaviors.
• All existing and new tests are passing.
• I updated/added relevant documentation (doc comments with ///).
• The analyzer (melos run analyze) does not report any problems on my PR.
• The package compiles with the minimum Flutter version stated in the pubspec.yaml

Breaking Change

Does your PR require plugin users to manually update their apps to accommodate your change?

• Yes, this is a breaking change.
• No, this is not a breaking change.

[github-actions]

Visit the preview URL for this PR (updated for commit 5def56e):

• https://coffeemakerexample--pr165-implement-animation-173zf4j6.web.app
• https://playgroundwoltexample--pr165-implement-animation-xry312ur.web.app
• https://playgroundnavigator2woltexample--pr165-implement-anima-o7ntz9pm.web.app

_{(expires Mon, 25 Mar 2024 04:35:27 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 906758393beb0353b979d020649d6a1efc40fb5b}

[TahaTesser]

LGTM with some nits!

[TahaTesser]

Missing doc

[ulusoyca]

Done 5def56e

[TahaTesser]

Missing doc

[ulusoyca]

Done 5def56e