I’m currently working on a Flutter project that requires a material bottom sheet. Usually, on Android projects, the material library is enough but for Flutter I haven’t found any library or tutorial that compares to the Android one. So I’ve decided to build it by myself and I came up with Rubber, a material bottom sheet implementation for Flutter.

This is still an early preview, some behaviors can change or being removed. Every feedback, bug report or feature request is welcome, please send it at the issue tracker

Why bottom sheets?

Apps are becoming more complex but at the same time need to be as simple as possible and easy to navigate.

It is difficult to fit a lot of information in the limited screens of our smartphones and the classic layout solutions (es. listview) are not always enough.

With bottom sheets we can show two different pages with related contents at the same time and let the user decide to which of the two give his attention. This way the page switching will be smoother and faster.

From the material guidelines, bottom sheets must be:

Supporting : Bottom sheets contain content that supplements the screen’s primary UI region.

: Bottom sheets contain content that supplements the screen’s primary UI region. Flexible : Bottom sheets can display a wide variety of content and layouts.

: Bottom sheets can display a wide variety of content and layouts. Ergonomic: Bottom sheets are easy to reach on a mobile device.

I’ve tried to keep these three principles in mind while developing rubber trying to make it user friendly and lightweight.

Spring Animation explained

When we swipe up the bottom sheet, the animation controller starts a spring animation. Behind runs the SpringSimulation that requires, among the other parameters, the springDescription.

This variable can be passed to the RubberAnimationController in the constructor and is in the form of:

springDescription = SpringDescription.withDampingRatio(

mass: 1.5,

stiffness: 300.0,

ratio: 0.4,

);

The stiffness defines the elastic constant and the lower it is, the wider the bottom sheet will stretch.

The ratio is the damping value and the higher it is, the fastest the bottom sheet stops to the final state.

In the near future I’m going to add some predefined constants to make it easier customize the feel of your bottom sheet and further explanations on the subject.

Next steps

Even though this library is still in his early phase, feedbacks are really appreciated. If you’d like to contribute or add the library to your project, you can find the complete documentation on the Wiki(still in progress..).

This is just the introduction to the library, I’m going to write more as the project evolves, so stay tuned!

You can also follow me on Twitter for quick updates or LinkedIn.