Enhance Your Flutter Apps with the WTF Sliding Sheet

Introduction

The WTF Sliding Sheet package grants you the power to create dynamic UI elements that can be effortlessly dragged, scrolled, and snapped into position. Its versatility enables you to incorporate both persistent and temporary sliding sheets into your app's design.

Usage

As a Persistent Widget

SlidingSheet(
    elevation: 8,
    cornerRadius: 16,
    snapSpec: SnapSpec(snap: true, snappings: [0.4, 0.7, 1.0], positioning: SnapPositioning.relativeToAvailableSpace),
    body: Center(child: Text('Below the SlidingSheet')),
    builder: (context, state) {
        return Container(
            height: 500,
            child: Center(
                child: Text('Content of the sheet'),
            ));
    });

As a BottomSheetDialog

showSlidingBottomSheet(context,
    builder: (context) {
        return SlidingSheetDialog(
            elevation: 8,
            cornerRadius: 16,
            snapSpec: 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('Content of the sheet', style: Theme.of(context).textTheme.bodyMedium),
                                ),
                            ),
                        ),
                    ));
            });
    });

Snapping

Snapping allows your sliding sheet to snap to specific positions during drag interactions. You can customize this behavior using the SnapSpec parameter.

SnapSpec(
    snap: true,
    snappings: [0.4, 0.7, 1.0],
    positioning: SnapPositioning.relativeToAvailableSpace,
    onSnap: (extent) => print('Sheet snapped to $extent');

Headers and Footers

Enrich your sliding sheets with headers and footers to provide additional context or functionality. These elements will remain fixed while the rest of the content scrolls.

SlidingSheet(
    ...
    headerBuilder: (context, state) {
        // Header builder
    },
    footerBuilder: (context, state) {
        // Footer builder
    },
    ...
);