Sliding Panel Kit #

A simple and lightweight solution for building sliding-up panels for Flutter with smooth drag gestures, snap-points, and built-in scroll coordination for scrollable content.

Preview #

Features #

Build custom sliding-up panels

• Easily build panels that slides up from the bottom of the screen.
• Includes optional widgets like SlidingPanelHandle and SlidingPanelBody.

Optional controller

• Panel works with or without a controller.
• Use a controller only when you need to programmatically control the panel.

Drag from anywhere

• The entire panel surface is draggable by default.
• Add a drag handle for visual guidance if desired.

Automatic scroll hand-off

• Embed scrollable content (ListView, GridView, CustomScrollView, etc.) inside the panel.
• Overscroll smoothly expands or collapses the panel, similar to Google Maps or Apple Music.

Snap-point system

• Automatically snaps to the nearest point when released.
• Supports option to configure curve-based and spring-based snapping.

Important note #

The API is under active development and may introduce breaking changes.

Getting Started #

Install the package by running this command:

flutter pub get sliding_panel_kit

Usage #

Here's a brief overview of the available components:

They can be combined and used as follows:

Step 1: #

Import the package:

import 'package:sliding_panel_kit/sliding_panel_kit.dart';

Step 2: #

Adding the panel:

class _SlidingPanelExampleState extends State<SlidingPanelExample> {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            // Content behind the panel
            SlidingPanelBuilder(
              builder: (context, handle) {
                return SlidingPanelBody(
                  child: ListView.builder(
                    itemCount: 25,
                    itemBuilder: (_, i) => ListTile(
                      title: Text('Item ${i + 1}'),
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Step 3: #

Add a drag handle:

SlidingPanelBuilder(
  handle: const SlidingPanelHandle(),
  builder: (context, handle) {
    return SlidingPanelBody(
      child: Column(
        children: [
          if (handle != null) handle,
          Expanded(
            child: ListView.builder(
              itemCount: 25,
              itemBuilder: (_, i) => ListTile(
                title: Text('Item ${i + 1}'),
              ),
            ),
          ),
        ],
      ),
    );
  },
),

Adding a handle reveals part of the panel, allowing it to be dragged and snapped at min and max extents.

Step 4: #

Add an additional snap point:

SlidingPanelBuilder(
  snapConfig: SlidingPanelSnapConfig(extents: [0.75]), // minExtent & maxExtent already included
  ...
)

Step 5: #

Add a controller (optional):

a. Create a controller:

class _SlidingPanelExampleState extends State<SlidingPanelExample> {
  final controller = SlidingPanelController();

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  ...
}

b. Provide the controller to the panel.

SlidingPanelBuilder(
  controller: controller,
  ...
)

Step 6: #

Programmatically control the panel:

FloatingActionButton(
  onPressed: () {
    controller.animateTo(
      1.0,
      duration: const Duration(milliseconds: 300),
      curve: Curves.ease,
    );
  },
)

For the complete example, see basic_usage/view.dart.

Here are some other examples:

• Spring-based snapping
• Nested scroll
• Parallax effect

Future Work #

Support for the following features is planned:

• Sliding panel route
• Panel docking positions

Contributing #

If you run into issues or have ideas for improvements, please file an issue on GitHub:

https://github.com/AdiSuresh/sliding_panel_kit/issues

Contributions are welcome! If you’d like to improve the package, feel free to submit a pull request.