Sunday, October 2, 2022

Flutter Slidable widget panel

Flutter Slidable widget panel

A Flutter slidable widget that provides an easy to use configuration. Highly customizable.

Easily put your content in the panel, customize it and then just use the panel for various purposes like,

  • Showing some persistent content on bottom of the screen.
  • Can be used like showModalBottomSheet() from Flutter to make user choices.
  • Also use like DraggableScrollableSheet() and put scrollable content inside the panel.
Take control Customize the way you want Various purposes
Screenshot Screenshot Screenshot

Installation

Add the following dependency to your pubspec.yaml file:

dependencies:
  sliding_panel: ^1.3.2

Below is a sample code to use the SlidingPanel in your project.

  • First, import the package.
import 'package:sliding_panel/sliding_panel.dart';
  • Then, create a PanelController, to manage the panel.
PanelController pc;
  • Initialize the controller in initState().
pc = PanelController();
  • Then, in body of your Scaffold, …
SlidingPanel(
  panelController: pc,
  content: PanelContent(
    headerWidget: PanelHeaderWidget(
      headerContent: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(
        'This is a SlidingPanel',
        style: Theme.of(context).textTheme.title,
        ),
      ),
      options: PanelHeaderOptions(centerTitle: true),
    ),
	
    // The only REQUIRED parameter
    panelContent: List.generate(20, (i) {
      return ListTile(
        title: Text('Item : ${i + 1}'),
      );
    }).toList(),

    bodyContent: Center(
      child: RaisedButton(
        onPressed: () {
        pc.collapse();
        },
        child: Text('Open the panel'),
      ),
    ),
  ),
  size: PanelSize(closedHeight: 0.0),
  // apply snapping effect
  snapping: PanelSnapping.enabled,
),

Result