flutter_sliding_panel 0.0.5 flutter_sliding_panel: ^0.0.5 copied to clipboard
A widget that has ability to be slided like a panel. Usually used in the homepage of an app.
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
Import the package #
import 'package:flutter_sliding_panel/flutter_sliding_panel.dart';
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,
)
- 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,
),
),
);
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'),
),
),
);
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,
),
),
),
);
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,
),
),
);
đ 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. đ