flutter_sliding_panel

Description:

flutter sliding panel

Flutter Sliding Panel #



Explore the capabilities of the Flutter Sliding Panel, a versatile and user-friendly widget that enables smooth sliding and seamless snapping behavior. This widget empowers you to effortlessly create slidable panels that smoothly snap to their designated anchors or expanded positions.
The standout feature of this panel is its seamless support for natural gestures when its child has scrollable content. Experience the fluidity of these gestures as the scrollview is navigated, and watch as the panel intelligently determines whether it should be anchored or not. To witness the panel's behavior during scrollview interactions, visit the sample web page.
🔬 Test The Package 🔬 #

Access the example web page here
The homepage features a simple example of the Sliding Panel widget.
Test how the panel behaves with a scrollview child by pressing the Scrollable button.
Experience how the panel handles multiple scrollview children by pressing the Multi Scrollable button.

Features #
🛝 A Slidable Panel
👩🏻‍🎨 Extensive Appearance Customization
🏎️ Smooth & Customizable Animation
🕹️ Control Panel Position Programmatically
♻️ Seamless Integration with RefreshIndicator
🧮 Designate Snapping Positions
Showcases #



Non-Scrollable Child
Show Refresh Indicator













Single Scrollable Child
Multi Scrollable Child









Usage #
Start using the Sliding Panel in your Flutter project with these simple steps:
Add to pubspec.yaml #
dart pub add flutter_sliding_panel
copied to clipboard
Import the package #
import 'package:flutter_sliding_panel/flutter_sliding_panel.dart';
copied to clipboard
Use the widget and have fun 🎉 #
You're all set to start using the Sliding Panel in your project. See the examples below to get started quickly.
Feature Details #
🛝 A Slidable Panel 🛝 #
Easily create panels that are slidable, reminiscent of bottom sheets, and have the capability to slide and snap to designated positions.
👩🏻‍🎨 Extensive Appearance Customization 👩🏻‍🎨 #
Tailor the panel's appearance to suit your interface specification by defining BoxDecoration for the decoration parameters.
🏎️ Smooth & Customizable Animation 🏎️ #
Experience smooth animations, carefully designed for performance. Customize animation curves and durations with the SlidingPanelConfig.
🕹️ Control Panel Position Programmatically 🕹️ #
Programmatically control the panel's position using SlidingPanelController. Use its anchor or expand methods to set the panel's state.
♻️ Seamless Integration with RefreshIndicator ♻️ #
The panel seamlessly integrates with a refresher, allowing for the reloading of content with a natural gesture and providing an enhanced user experience.
🧮 Designate Snapping Positions 🧮 #
Specify the panel's snapping positions using SlidingPanelConfig. Define the anchor and expand positions as per your requirements.
SlidingPanelConfig(
anchorPosition: MediaQuery.of(context).size.height / 2,
expandPosition: MediaQuery.of(context).size.height - 200,
)
copied to clipboard

The anchor position is when the panel is closed (lowered).
The expanded position is when the panel is fully open.
Ensure that the anchor position is lower than the expanded position.
Positions are calculated from the bottom to the top of the viewport.

Examples #
SlidingPanel with Non-Scrollable Child #
This is the most basic type of sliding panel. Simply instantiate SlidingPanel and pass every params needed.
SlidingPanel(
controller: SlidingPanelController(),
config: SlidingPanelConfig(
anchorPosition: MediaQuery.of(context).size.height / 2,
expandPosition: MediaQuery.of(context).size.height - 200,
),
panelContent: Text(
'\nDRAG ME!',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40,
letterSpacing: -1,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
color: Theme.of(context).colorScheme.onSurface,
),
),
);
copied to clipboard
SlidingPanel with a Single Scrollable Child #
In this example, the panel's content is a scrollview. Use SlidingPanel.scrollableContent() when creating the widget. This provides a panelContentBuilder that includes a ScrollController and ScrollPhysics to be used with the scrollview. These controllers and physics settings enable a natural scrolling experience when the user interacts with the scrollview.
SlidingPanel.scrollableContent(
controller: SlidingPanelController(),
config: SlidingPanelConfig(
anchorPosition: MediaQuery.of(context).size.height / 2,
expandPosition: MediaQuery.of(context).size.height - 200,
),
panelContentBuilder: (controller, physics) => ListView.builder(
controller: controller,
physics: physics,
itemBuilder: (context, index) => Container(
height: 50,
alignment: Alignment.center,
child: Text('$index'),
),
),

);
copied to clipboard
SlidingPanel with Multi Scrollable Child Example #
This example features a sliding panel with multiple scrollviews as its content. Use SlidingPanel.multiScrollableContent() to create the widget. Provide the number of scrollable children using the scrollableChildCount parameter. This provides a panelContentBuilder with ScrollController and ScrollPhysics settings for each scrollview. The number of controllers and physics settings corresponds to the specified scrollableChildCount, allowing for a natural scrolling experience when interacting with the scrollviews.
SlidingPanel.multiScrollableContent(
controller: SlidingPanelController(),
scrollableChildCount: 2,
config: SlidingPanelConfig(
anchorPosition: MediaQuery.of(context).size.height / 2,
expandPosition: MediaQuery.of(context).size.height - 200,
),
panelContentBuilder: (controller, physics) => TabBarView(
controller: tabController,
children: List.generate(
2,
(index) => MultiScrollableChildTab(
controller: controller[index],
physics: physics[index],
tabIndex: index,
),
),
),
);
copied to clipboard
Show Refresh Indicator if Panel is Overly Scrolled #
To display a refresh indicator, pass SlidingPanelRefresherConfig to the dragToRefreshConfig parameter. The refresh indicator appears when the panel is over-scrolled while in the anchored state.
SlidingPanel(
controller: SlidingPanelController(),
config: SlidingPanelConfig(
anchorPosition: MediaQuery.of(context).size.height / 2,
expandPosition: MediaQuery.of(context).size.height - 200,
),
dragToRefreshConfig: SlidingPanelRefresherConfig(
onRefresh: () async {
// TODO: Implement on refresh
},
),
panelContent: Text(
'\nDRAG ME!',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40,
letterSpacing: -1,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
color: Theme.of(context).colorScheme.onSurface,
),
),
);
copied to clipboard
😇 Contribute #
We are always thrilled to welcome anyone who wishes to enhance this package. Your contributions are greatly appreciated! 🙇‍♂️
💡 Issue / Feature Requests #
If you have specific features in mind, don't hesitate to let me know. Please open an issue to discuss your feature requests, and I'll be more than happy to consider them and collaborate towards making this package even better. 🙏