search

woltapp / wolt_modal_sheet

This package provides a responsive modal with multiple pages, motion animation for page transitions, and scrollable content within each page.
MIT License
403 stars 52 forks source link

Example with Riverpod state management #189

Open spehj opened 2 months ago

spehj commented 2 months ago

Description

Riverpod is one of the top 3 most popular state management packages. I suggest creating an example of using Riverpod providers to manage state when moving between sheets.

Please tell us the problem you are running into that led to you wanting a new feature.

I was developing an app for a client and decided to use the Wolt Modal Sheets package because it looks cool and works out of the box. The only problem is, that I need to dig deep into the example code and translate it from Provider to Riverpod state management which takes quite some time.

ulusoyca commented 2 months ago

Hi, I am working on a new demo app which I will push this week. It uses the Provider package, but it will be very simple to use Riverpod for it. Please also tune in for my talk in which I will explain the demo app: https://fullstackflutter.dev/

ulusoyca commented 1 month ago

Hi, the full stack flutter conference is today!

Here is the demo app. In this commit I show how I convert the imperative call to showing modal sheet to declarative call.

Also, full demo app with provider is here: https://github.com/woltapp/wolt_modal_sheet/pull/217

Purus commented 1 month ago

I am struggling to get the data from each page to the other using riverpod. Any simple code example for reference would be great.

spehj commented 1 month ago

I am struggling to get the data from each page to the other using riverpod. Any simple code example for reference would be great.

It's been a while since I opened this issue. In the end, I decided to go with a simple PageView widget to be able to use Riverpod instead of using Wolt Modal Sheets.

ulusoyca commented 1 month ago

I am struggling to get the data from each page to the other using riverpod. Any simple code example for reference would be great.

You can do this by using the decorator field. All you need to do is to provide a ChangeNotifierProvider or some other notifiers using this field. By doing so, the decorator widget wraps the entire subtree of the modal, and you can manage your data inside the decorator widget no matter which page you are in.

The coffee maker app is an example to this use case. Please check this example.

ulusoyca commented 1 month ago

I am struggling to get the data from each page to the other using riverpod. Any simple code example for reference would be great.

It's been a while since I opened this issue. In the end, I decided to go with a simple PageView widget to be able to use Riverpod instead of using Wolt Modal Sheets.

Have you had any chance to check the demo app? I really would like to make it easy to understand regardless of the state management package. Maybe I can improve the Readme if you can provide feedback about what is confusing.

spehj commented 1 month ago

I quickly looked at the demo app with the decorator field. I need some time to play with it to see if it works well with Riverpod. Anyway, I miss the option to make the modals reactive in the "native" flutter way (using widgets) with the WMS.