flutter_sliding_up_panel

Description:

flutter sliding up panel

flutter_sliding_up_panel #
A sliding up panel widget which can be used to show or hide content, beautiful and simple.
demo #

Getting Started #
Null safety #
dependencies:
flutter_styled_toast: ^2.0.1
copied to clipboard
Previous version #
dependencies:
flutter_sliding_up_panel: ^1.2.1
copied to clipboard
import 'package:flutter_sliding_up_panel/flutter_sliding_up_panel.dart';
copied to clipboard
Stack(
children: <Widget>[
Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
widget.onSetting?.call();
},
)
],
),
body: Container(
child:Center(
child:Text('This is content'),
),
),
),
SlidingUpPanelWidget(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 15.0),
decoration: ShapeDecoration(
color: Colors.white,
shadows: [BoxShadow(blurRadius: 5.0,spreadRadius: 2.0,color: const Color(0x11000000))],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
),
),
),
child: Column(
children: <Widget>[
Container(
color: Colors.white,
alignment: Alignment.center,
height: 50.0,
child: Row(
children: <Widget>[
Icon(Icons.menu,size: 30,),
Padding(
padding: EdgeInsets.only(left: 8.0,),
),
Text(
'click or drag',
)
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
Divider(
height: 0.5,
color: Colors.grey[300],
),
Flexible(
child: Container(
child: ListView.separated(
controller: scrollController,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return ListTile(
title: Text('list item $index'),
);
},
separatorBuilder: (context, index) {
return Divider(
height: 0.5,
);
},
shrinkWrap: true,
itemCount: 20,
),
color: Colors.white,
),
),
],
mainAxisSize: MainAxisSize.min,
),
),
controlHeight: 50.0,
anchor: 0.4,
panelController: panelController,
onTap: (){
///Customize the processing logic
if(SlidingUpPanelStatus.expanded==panelController.status){
panelController.collapse();
}else{
panelController.expand();
}
}, //Pass a onTap callback to customize the processing logic when user click control bar.
enableOnTap: true,//Enable the onTap callback for control bar.
dragDown: (details){
print('dragDown');
},
dragStart: (details){
print('dragStart');
},
dragCancel: (){
print('dragCancel');
},
dragUpdate: (details){
print('dragUpdate,${panelController.status==SlidingUpPanelStatus.dragging?'dragging':''}');
},
dragEnd: (details){
print('dragEnd');
},
),
],
);
copied to clipboard
SlidingUpPanelWidget param #



property
description




child
Widget (Not Null)(required) (Child widget)


controlHeight
double (Not Null)(required) (The height of the control bar which could be used to drag or click to control this panel)


animationController
AnimationController (The animation that controls the bottom sheet's position.)


panelController
SlidingUpPanelController (Not Null)(required) (The controller to control panel)


onStatusChanged
OnSlidingUpPanelStatusChanged (Called when the this panel status changed)


elevation
double (default 8.0) (Elevation of the panel)


panelStatus
SlidingUpPanelStatus (default SlidingUpPanelStatus.collapsed) (Panel status)


anchor
double (default 0.5) (The fraction of anchor position, which is from 0 to 1.0)


onTap
VoidCallback (default is a build-in callback) (Void callback when click control bar)


enableOnTap
bool (Not Null)(default is true) (Enable or disable the tap callback for control bar)


dragDown
OnSlidingUpPanelDragDown (default is null) (Drag down listener)


dragStart
OnSlidingUpPanelDragStart (default is null) (Drag start listener)


dragUpdate
OnSlidingUpPanelDragUpdate (default is null) (Drag update listener)


dragCancel
OnSlidingUpPanelDragCancel (default is null) (Drag cancel listener)


dragEnd
OnSlidingUpPanelDragEnd (default is null) (Drag end listener)



Example #
example