stopper 1.0.0

A bottom sheet that can be expanded to one of the pre-defined stop heights by dragging.

Stopper

A bottom sheet that can be expanded to one of the pre-defined stop heights by dragging.

Introduction

Some iOS applications have a bottom sheet that has two states: half-expanded and fully expanded. The standard showBottomSheet method lacks such a capability. A complication in implementing this behavior arises if the the bottom sheet is scrollable, making scroll and drag event handling difficult as they are consumed by the underlying scroll view. The Stopper plugin addresses this problem by:

• Letting the developer define discreet height values (stops) to which the bottom sheet can be expanded;
• Using the builder design pattern to build the bottom sheet, depending on the current stop value;
• Instantiating ScrollController and ScrollPhysics objects and passing them to the bottom sheet builder;
• Using animations to make transitions of the bottom sheet between the stops look natural;
• Providing a convenient showStopper function to be used instead of showBottomSheet in order to handle the dismissal of bottom sheet by the user.

This plugin utilizes the bottom sheet functionality from the Scaffold widget and avoids copy/paste from the standard library, making the implementation clear and easy to maintain.

Example

import 'package:stopper/stopper.dart';
//...
final height = MediaQuery.of(context).size.height;
//...
MaterialButton(
  child: Text("Show Stopper"),
  onPressed: () {
    showStopper(
      context: context,
      stops: [0.5 * height, height],
      builder: (context, scrollController, scrollPhysics, stop) {
        return ListView(
          controller: scrollController,
          physics: scrollPhysics,
          children: [
            //...
          ]
        );
      }
    );
  },
  ...
)

Note: The build context passed to showStopper must have a Scaffold widget as an ancestor. Therefore it's recommended to use Builder to build the body of the Scaffold. See the complete example app provided in this package for details on this approach.