stopper 1.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 87

Stopper #

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

animated image

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. The complexity in implementing this behavior arises when the the bottom sheet needs to be scrollable, making scroll and drag event handling difficult as these gestures can be used for scrolling the list as well as for dragging the bottom sheet up/down, depending on the position of the bottom sheet and the current scroll position. 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 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 dismissal of the bottom sheet by the user.

This plugin utilizes 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.

[1.0.0] - 04/02/2019

  • Initial release.

[1.0.1] - 04/02/2019

  • Fixed a bug caused by not properly disposing AnimationController.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:stopper/stopper.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Hello")),
      body: Builder(
        builder: (context) {
          final h = MediaQuery.of(context).size.height;
          return Center(
            child: MaterialButton(
              color: Colors.green,
              child: Text("Show Stopper"),
              onPressed: () {
                showStopper(
                  context: context,
                  stops: [0.4 * h, h],
                  builder: (context, scrollController, scrollPhysics, stop) {
                    return ClipRRect(
                      borderRadius: stop == 0 ? BorderRadius.only(
                        topLeft: Radius.circular(10),
                        topRight: Radius.circular(10),
                      ): BorderRadius.only(),
                      clipBehavior: Clip.antiAlias,
                      child: Container(
                        color: Colors.orange,
                        child: CustomScrollView(
                          slivers: <Widget>[
                            SliverAppBar(
                              title: Text("What's Up?"),
                              backgroundColor: Colors.orange,
                              automaticallyImplyLeading: false,
                              primary: false,
                              floating: true,
                              pinned: true,
                            ),
                            SliverList(
                              delegate: SliverChildBuilderDelegate(
                                (context, idx) => ListTile(
                                    title: Text("Nothing much"),
                                    subtitle: Text("$idx"),
                                ),
                                childCount: 100,
                              ),
                            )
                          ],
                          controller: scrollController,
                          physics: scrollPhysics,
                        ),
                      ),
                    );
                  },
                );
              },
            )
          );
        },
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  stopper: ^1.0.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:stopper/stopper.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
75
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
87
Learn more about scoring.

We analyzed this package on Oct 20, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/stopper.dart.

Run flutter format to format lib/stopper.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test