Skip to content

Quick start

Mattia Crovero edited this page Dec 19, 2018 · 8 revisions

In this section we're implementing the bare minimum to start using Rubber, for further customizations see Animation controller and Bottom navigation.

First add the dependency to your project as explained here.

To get the animation ticker 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. (See Animation controller)

@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 (Widget)
    upperLayer: _getUpperLayer(), // The bottomsheet content (Widget)
    animationController: _controller, // The one we created earlier
)
Clone this wiki locally