4

I'm new to Navigator 2.0 in Flutter, and now I'm trying to achieve BottomSheet behavior using declarative approach. Unfortunately, I only managed to come up with quite a cumbersome way to do that so I'm wondering if there's an easier way.

I'm building a shopping app and I want to show the item details card that slides out from the bottom of the screen, dimming the previous page (as shown in picture), when user taps on item in a list. I also want to allow url support, so that /item/id opens home page and then shows the details card over it.

What I'm trying to achieve

So how I think this could be done is to push (or to add to Navigator's pages array in case of Navigator 2.0) custom non-opaque page with no transition animation using TransitionDelegate and PageRouteBuilder, and then animate dimming and sliding by hand using animation controllers. But this approach seems unnatural (and genuinely scares me to be honest) and it's still not clear to me how to handle back button in this case (Do I need to somehow notify the page to play closing animation from Navigator's onPopPage, is this the way to do this?).

If anyone has an experience of implementing similar feature, I would really appreciate sharing it! Or maybe you have come up with more elegant solution, then tell me about it and I'll give it a try! Thanks!

stulov
  • 41
  • 4

0 Answers0