flutter_sliding_up_panel 1.1.0+1
flutter_sliding_up_panel: ^1.1.0+1

Flutter Android iOS web

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

flutter_sliding_up_panel #

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

demo #

Getting Started #

dependencies:
  flutter_sliding_up_panel: ^1.1.0+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.
    ),
  ],
);

SlidingUpPanelWidget param #

propertydescription
childWidget (Not Null)(required) (Child widget)
controlHeightdouble (Not Null)(required) (The height of the control bar which could be used to drag or click to control this panel)
animationControllerAnimationController (The animation that controls the bottom sheet's position.)
panelControllerSlidingUpPanelController (Not Null)(required) (The controller to control panel)
onStatusChangedOnSlidingUpPanelStatusChanged (Called when the this panel status changed)
elevationdouble (default 8.0) (Elevation of the panel)
panelStatusSlidingUpPanelStatus (default SlidingUpPanelStatus.collapsed) (Panel status)
anchordouble (default 0.5) (The fraction of anchor position, which is from 0 to 1.0)
onTapVoidCallback (default is a build-in callback) (Void callback when click control bar)
enableOnTapbool (Not Null)(default is true) (Enable or disable the tap callback for control bar)

Example #

example

13
likes
110
pub points
83%
popularity

Publisher

tookit.cn

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache 2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_sliding_up_panel