Enhanced Flexibility with Custom Modal Types

[ulusoyca]

Background

Currently, the WoltModalType class within our package supports a limited array of modal types, specifically bottom sheets and dialogues. While these modal types serve many common use cases, they fall short when more specialized UX designs and interactions are required. Developers often need to implement custom modals that are not only functionally diverse but also seamlessly integrate with existing design systems.

Problem Statement

The existing limitation in the variety of supported modal types and demand for a more flexible modal system that can accommodate a broader range of UI patterns.

Proposed Feature: Customizable Modal Framework

I propose enhancing the WoltModalType class to support the creation and integration of custom modal types. This enhancement would significantly broaden the package's utility, allowing developers to easily implement unique and complex UI patterns.

Feature Description

The introduction of a customizable modal framework would include:

• Base Custom Modal Class: A base class that provides core functionalities such as animations, positioning, and layout mechanisms. This class would serve as the template from which all specific modal types are derived.
• Extendible Default Modals: The package should include three fundamental modal types—bottom sheet, dialog, and side sheet. These should be implemented as extensions of the base custom modal class, allowing for straightforward customization. -
• Developers could modify aspects such as layout, positioning, and transition animations or build entirely new modal types from scratch by extending the WoltModalType class.

Issues Related

Issues related to this feature is labeled with Custom Modal Type

• Set page transition animation duration #229
• Position Modal (topCenter, bottomCenter)? #193
• Floating bottom sheet #185
• Add change width of dialog or BTS #170
• Add side sheet modal type #25

Task list

• Create abstract WoltModalType for Dialog and Bottomsheet
• Introduce Side Sheet modal
• Add modalTypeBuilder to theme data and default theme data
• Customize transitionDuration for each modal
• Add useSafeArea to page and WoltModalType
• Add examples to playground to demonstrate the custom modals.
• Add fixed wolt modal type for the page.

Example

custom_modal.mov

[ulusoyca]

Added in #235