Skip to content

Bottom navigation

Mattia Crovero edited this page Dec 19, 2018 · 1 revision

Some apps may require a bottom navigation (e.g. google maps) and the bottom sheet needs to be dragged up from the menu. To implement this behavior, Rubber bottom sheets accept a third element in the instantiation as follows:

RubberBottomSheet(
    lowerLayer: _getLowerLayer(),
    upperLayer: _getUpperLayer(),
    menuLayer: _getMenuLayer(),
    animationController: _controller,
)

We can now create the menu layer method and return a container with a 100pixels height.

Widget _getMenuLayer() {
    return Container(
        height: **100**,
        decoration: BoxDecoration(
            color: Colors.red
        ),
    );
}

Finally to make the bottom sheet animation start from the top of the menu

_controller = RubberAnimationController(
    vsync: this,
    dismissable: true,
    lowerBoundValue: AnimationControllerValue(pixel: 100),
    upperBoundValue: AnimationControllerValue(pixel: 400),
    duration: Duration(milliseconds: 200)
);

The dismissable parameter set to true will prevent the bottom sheet to bounce back in the drag down animation.

Clone this wiki locally