Friday, December 1, 2023

Bottom sheet transition in Flutter

Parallax effects are fantastic. Having elements move at different speeds during scrolling can easily provide the application’s unique feeling and make the user think that your app is well-polished.

In this post, I will try to achieve the parallax effect using PageView, Transforms, Alignments, and some basic math.

The UI Challenge written in flutter

Described in following post:

Parallax effect in PageView
Bottom sheet transition

The design:

Design

The implementation:

Implementation

In home_page.dart you can replace ExhibitionBottomSheet with ScrollableExhibitionSheet to achieve see different implementation with full Listview.

Scrollable