Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use absolute paths for gifs #3

Merged
merged 1 commit into from
Jul 6, 2023
Merged

Use absolute paths for gifs #3

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,40 @@ WoltModalSheet is designed to revolutionize the use of Flutter modal sheets. Bui

Traverse through numerous pages within a single sheet.

![Experience multi-page navigation in WoltModalSheet](./doc/ss_multi.gif)
![Experience multi-page navigation in WoltModalSheet](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/ss_multi.gif?raw=true)

### Scrollable Content

Greater flexibility with scrollable content per page, accommodating large content effortlessly.

![Scroll with ease in WoltModalSheet](./doc/ss_scrolling.gif)
![Scroll with ease in WoltModalSheet](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/ss_scrolling.gif?raw=true)

### Responsive Design

The modal sheet adjusts to fit all screen sizes, appearing as a dialog on larger screens and as a bottom sheet on smaller screens, guided by user-specified conditions.

![Adaptability to different screen sizes in WoltModalSheet](ss_responsive.gif)
![Adaptability to different screen sizes in WoltModalSheet](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/ss_responsive.gif?raw=true)

### Motion Animation

Engage users with dynamic motion animation for page transitions and scrolling.

Pagination | Scrolling
--- | ---
![Pagination](./doc/ss_motion_pagination.gif) | ![Scrolling](./doc/ss_scroll_motion.gif)
| Pagination | Scrolling |
| ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| ![Pagination](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/ss_motion_pagination.gif?raw=true) | ![Scrolling](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/ss_scroll_motion.gif?raw=true) |


### Imperative and Declarative Navigation

The library showcases examples of both imperative and declarative navigation patterns to display modal sheet on screen.

![Illustration of imperative and declarative navigation in WoltModalSheet](./doc/ss_navigator_2.gif)
![Illustration of imperative and declarative navigation in WoltModalSheet](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/ss_navigator_2.gif?raw=true)

### Dynamic Pagination

User input can dynamically shape the modal sheet's page list.

![Dynamic pagination in action in WoltModalSheet](./doc/ss_dynamic_pagination.gif)
![Dynamic pagination in action in WoltModalSheet](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/ss_dynamic_pagination.gif?raw=true)

### State Management Integration

Expand Down Expand Up @@ -196,7 +196,7 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
The code snippet above produces the following:
</br>
</br>
![Dynamic pagination in action in WoltModalSheet](./doc/ss_onboarding.gif)
![Dynamic pagination in action in WoltModalSheet](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/ss_onboarding.gif?raw=true)

### Playground app with imperative navigation

Expand Down Expand Up @@ -236,7 +236,7 @@ The code snippet demonstrates how to decorate the modal sheet with a change noti
);
}
```
![Dynamic pagination in action in WoltModalSheet](./doc/ss_coffee_maker.gif)
![Dynamic pagination in action in WoltModalSheet](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/ss_coffee_maker.gif?raw=true)

## Additional information
In [this blog post](https://careers.wolt.com/en/blog/engineering/an-overview-of-the-multi-page-scrollable-bottom-sheet-ui-design), we explore the foundational design decisions that guide the WoltModalSheet's functionality.
Expand Down