feat: Add Attached Sheet to Playground

[ABausG]

Description

Adding an AttachedFloatingBottomSheetType to the Playground App.
This works by using a GlobalKey as the anchor to Align the Sheet at the Position of the Anchor.

One thing I think can still be improved is the animation. Ideally it would be nice if the Modal Scales out from the anchor position (+ Transformation based on Anchor Size/Alignment)

A Demo (before improvements to the Alignments/Size Constraints can be found here:

Screen.Recording.2024-07-18.at.00.11.28.mov

Related Issues

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 8b21441):

• https://coffeemakerexample--pr265-attached-sheet-dup9glky.web.app
• https://playgroundwoltexample--pr265-attached-sheet-o5rw7wz6.web.app
• https://playgroundnavigator2woltexample--pr265-attached-sheet-m818bc8b.web.app
• https://coffeemakernavigator2--pr265-attached-sheet-tzkqyvnh.web.app

_{(expires Wed, 24 Jul 2024 22:17:19 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 00f7f56c8a4ce5693de819a908406c0fc6411226}

[ulusoyca]

Thank you very much for the example!

[ulusoyca]

@ABausG When RTL is selected, there is weird behavior. Can you check?

ltr_wms.mov

[ABausG]

@ABausG When RTL is selected, there is weird behavior. Can you check?

Did not test that!! Solved by swapping the passed alignment based on the directionality. Works for me now!

[ulusoyca]

👑 AMAZING! Super happy <3

[durannumit]

• still there are some issues on mobile

LTR	RTL

For me looks really good on web btw

[ABausG]

Did a further refactor to now auto-calculate the Alignment that results in the most available space. By my testing (resizing to super small form factors) this now solves the issue as in the screenshot from mobile

[durannumit]

Did a further refactor to now auto-calculate the Alignment that results in the most available space. By my testing (resizing to super small form factors) this now solves the issue as in the screenshot from mobile

I tried on latest version, it looks same. Let me test on more devices also

[ABausG]

@durannumit I did some more adjustments to the maxWidth calculation but for me it also works fine on iOS and Android Simulator 🤔

[durannumit]

@durannumit I did some more adjustments to the maxWidth calculation but for me it also works fine on iOS and Android Simulator 🤔

it works well now! Thanks for quick adjustment, LGTM 🚀