What is the Rubber widget in Flutter?

• General

Bottom sheets are surfaces containing supplementary content that is anchored to the bottom of the screen. So, in this article, we will see what is Rubber widget in Flutter.

What is the Rubber widget in Flutter?

Apps are becoming more complex. But at the same time need to be simple and easy to navigate. It is difficult to fit a lot of information in the limited screens of our smartphones. Also, the classic layout solutions (es. listview) is not always enough.

With bottom sheets, you can show two different pages with related contents at the same time. Moreover, the user can decide to which page they will give more 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.
• Flexible: Bottom sheets can display a wide variety of content and layouts.
• Ergonomic: Bottom sheets are easy to reach on a mobile device.

Spring Animation:

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. So, the lower it is, the wider the bottom sheet will stretch. The ratio is the damping value. The higher it is, the fast the bottom sheet stops to the final state.

Implementation:

So, let’s see how to implement the bare minimum to start using Rubber. First, add the dependency to your project. To get the animation ticker to add SingleTickerProviderStateMixin to the State containing the bottomsheet.

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {

SingleTickerProviderStateMixin Provides a single [Ticker] that is configured to only tick while the current tree is enabled, as defined by [TickerMode]. Then create the RubberAnimationController object that controls the bottomsheet animation.

@override
  void initState() {
    _controller = RubberAnimationController(
        vsync: this, // Thanks to the mixin
    );
    super.initState();
  }

And finally, add the bottomsheet to our layout with:

RubberBottomSheet(
    lowerLayer: _getLowerLayer(), // The underlying page
    upperLayer: _getUpperLayer(), // The bottomsheet content
    animationController: _controller, // One we created earlier
)

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

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen what is Rubber widget in Flutter. Also, feel free to comment and provide any other suggestions regarding Flutter tips & tricks.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.