Skip to content

JackJonson/flutter_sliding_up_panel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Previous version

dependencies:
  flutter_sliding_up_panel: ^1.2.1
import 'package:flutter_sliding_up_panel/flutter_sliding_up_panel.dart';
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');
      },
    ),
  ],
);

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