Sliding Sheet#

A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents.

Clickhere to view the full example.

Installing#

Add it to yourpubspec.yaml file:

dependencies:  sliding_sheet: ^0.5.2

Install packages from the command line

flutter packages get

If you like this package, consider supporting it by giving it a star onGitHub and a like onpub.dev ❤️

Usage#

There are two ways in which you can use aSlidingSheet: either as a permanent (or persistent)Widget in yourwidget tree or as aBottomSheetDialog.

As a Widget#

This method can be used to show theSlidingSheet permanently (usually above your other widget) as shown in the example.

@overrideWidget build(BuildContext context) {  return Scaffold(    backgroundColor: Colors.grey.shade200,    appBar: AppBar(      title: Text('Simple Example'),    ),    body: SlidingSheet(      elevation: 8,      cornerRadius: 16,      snapSpec: const SnapSpec(        // Enable snapping. This is true by default.        snap: true,        // Set custom snapping points.        snappings: [0.4, 0.7, 1.0],        // Define to what the snappings relate to. In this case,         // the total available space that the sheet can expand to.        positioning: SnapPositioning.relativeToAvailableSpace,      ),      // The body widget will be displayed under the SlidingSheet      // and a parallax effect can be applied to it.      body: Center(        child: Text('This widget is below the SlidingSheet'),      ),      builder: (context, state) {        // This is the content of the sheet that will get        // scrolled, if the content is bigger than the available        // height of the sheet.        return Container(          height: 500,          child: Center(            child: Text('This is the content of the sheet'),          ),        );      },    ),  );}

Result:

As a BottomSheetDialog#

This method can be used to show aSlidingSheet as aBottomSheetDialog by calling theshowSlidingBottomSheet function and returning and instance ofSlidingSheetDialog.

void showAsBottomSheet() async {  final result = await showSlidingBottomSheet(    context,    builder: (context) {      return SlidingSheetDialog(        elevation: 8,        cornerRadius: 16,        snapSpec: const SnapSpec(          snap: true,          snappings: [0.4, 0.7, 1.0],          positioning: SnapPositioning.relativeToAvailableSpace,        ),        builder: (context, state) {          return Container(            height: 400,            child: Center(              child: Material(                child: InkWell(                  onTap: () => Navigator.pop(context, 'This is the result.'),                  child: Padding(                    padding: const EdgeInsets.all(16),                    child: Text(                      'This is the content of the sheet',                      style: Theme.of(context).textTheme.body1,                    ),                  ),                ),              ),            ),          );        },      );    }  );  print(result); // This is the result.}

Result:

Snapping#

ASlidingSheet can snap to multiple extents or to no at all. You can customize the snapping behavior bypassing an instance ofSnapSpec to theSlidingSheet.

There are also some prebuild snaps you can facilitate to snap for example to headers or footers as shown in the example.

SheetController#

TheSheetController can be used to change the state of aSlidingSheet manually, simply passing an instance ofSheetController to aSlidingSheet. Note that the methods can only be used after theSlidingSheet has been rendered, however calling them before wont throw an exception.

Note that you can also use the staticSheetController.of(context) method to obtain an instance of theSheetController of the closestSlidingSheet. This also works if you didn't assign aSheetController explicitly on theSlidingSheet.

Headers and Footers#

Headers and footers are UI elements of aSlidingSheet that will be displayed at the top or bottom of aSlidingSheet respectively and will not get scrolled. The scrollable content will then live in between the header and the footer if specified. Delegating the touch events to theSlidingSheet is done for you. Example:

@overrideWidget build(BuildContext context) {  return Scaffold(    backgroundColor: Colors.grey.shade200,    appBar: AppBar(      title: Text('Simple Example'),    ),    body: Stack(      children: <Widget>[        SlidingSheet(          elevation: 8,          cornerRadius: 16,          snapSpec: const SnapSpec(            snap: true,            snappings: [112, 400, double.infinity],            positioning: SnapPositioning.pixelOffset,          ),          builder: (context, state) {            return Container(              height: 500,              child: Center(                child: Text(                  'This is the content of the sheet',                  style: Theme.of(context).textTheme.body1,                ),              ),            );          },          headerBuilder: (context, state) {            return Container(              height: 56,              width: double.infinity,              color: Colors.green,              alignment: Alignment.center,              child: Text(                'This is the header',                style: Theme.of(context).textTheme.body1.copyWith(color: Colors.white),              ),            );          },          footerBuilder: (context, state) {            return Container(              height: 56,              width: double.infinity,              color: Colors.yellow,              alignment: Alignment.center,              child: Text(                'This is the footer',                style: Theme.of(context).textTheme.body1.copyWith(color: Colors.black),              ),            );          },        ),      ],    ),  );}

Result:

ListViews and Columns#

The children of aSlidingSheet are not allowed to have an inifinite (unbounded) height. Therefore when using aListView, make sure to setshrinkWrap totrue andphysics toNeverScrollableScrollPhysics. Similarly when using aColumn as a child of aSlidingSheet, make sure to set themainAxisSize toMainAxisSize.min.

Material Effects#

In order to change the UI when the sheet gets interacted with, you can pass a callback to thelistener field of aSlidingSheet that gets called with the currentSheetState whenever the sheet slides or gets scrolled. You can then rebuild your UI accordingly. When using theSlidingSheet as abottomSheetDialog you can also useSheetController.rebuild() to rebuild the sheet, if you want to change certain paramerters.

For rebuilding individual children of aSlidingSheet (e.g. elevating the header when content gets scrolled under it), you can also use theSheetListenerBuilder:

return SheetListenerBuilder(  // buildWhen can be used to only rebuild the widget when needed.  buildWhen: (oldState, newState) => oldState.isAtTop != newState.isAtTop,  builder: (context, state) {    return AnimatedContainer(      elevation: !state.isAtTop ? elevation : 0.0,      duration: const Duration(milliseconds: 400),      child: child,    );  },);

The example for instance decreases the corner radius of theSlidingSheet as it gets dragged to the top and increases the headers top padding by the status bar height. Also, when content gets scrolled under the header it elevates.

Because these are common Material behaviors,SlidingSheet supports those out of the box, which can be achieved by setting theavoidStatusBar field totrue,cornerRadiusOnFullscreen to0 andliftOnScrollHeaderElevation to the elevation.