preface

Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on iOS and Android.

Nicholas Gaulbag, a famous IT expert, once said: The wheel is the ladder of IT progress! Popular frames are the same, with wheels pick one in a million! Flutter, a cross-platform development framework that has been on the rise for the last two years, has a smaller third-party ecosystem than other mature frameworks, but it has a lot of wheels. This series of articles select the wheels commonly used in daily APP development to share, so as to improve the efficiency of brick moving, and hope that the ecology of Flutter will become more and more perfect, with more and more wheels.

This series of articles has been prepared with over 50 wheel recommendations, working for reasons that try to produce an article every 1-2 days.

This series of articles is for those who already have some of the basics of FLUTTER

The body of the

The wheel

  • Wheel name: slide_up_panel
  • Overview of the wheels: The Flutter can be customizable up slide out drawer.
  • Wheels by [email protected]
  • ★★★★ ★
  • ★★★★
  • Effect preview:

The installation

dependencies:
  sliding_up_panel: ^ 0.3.6
Copy the code
import 'package:sliding_up_panel/sliding_up_panel.dart';
Copy the code

The basic use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("SlidingUpPanelExample"),
    ),
    body: SlidingUpPanel(
      panel: Center(
        child: Text("This is the drawer section."),
      ),
      body: Center(
        child: Text("So this is the page area."),),),); }Copy the code

Parameter configuration

More control can be achieved with options:

parameter describe
panel Widgets that slide into view (required). The top of the Widget is displayed when the panel collapses and if the collapsed is null. Otherwise, collapsed will appear at the top of the widget.
collapsed When the panel collapses, the widget appears at the top. As the panel opens, this effect fades away.
body The widget located below the sliding panel. The widget automatically resizes to fill the screen.
minHeight Height of sliding panel when fully folded.
maxHeight Height of sliding panel when fully open.
border Draws a border on the slide panel.
borderRadius If not empty, use this to round the skateboard panel.
boxShadow Shadow cast behind sliding panel table.
color Fill the color of the sliding panel background
padding Sliding panel padding
margin Sliding panel margin
renderPanelSheet Set to false does not render drawings on which panel is located. This means that only body, collapsed and panel widgets are rendered. Set it to false if you want a floating effect or need more customization of the appearance of the sliding panel.
panelSnapping Set to false to disable panel quick opening or closing.
backdropEnabled If not empty, the body shows a dark shadow on the panel when it slides open.
backdropColor Shadow color.
backdropOpacity Shadow opacity, 0.0-1.0
backdropTapClosesPanel Whether to tap the background to close the panel. The default is true.
controller The controller
onPanelSlide If not NULL, this callback is called when the panel slides with the current position of the panel. The position is a double between 0.0 and 1.0, with 0.0 fully folded and 1.0 fully open.
onPanelOpened If not null, this callback is called when the panel is fully open.
onPanelClosed If not null, this callback is called when the panel is fully collapsed.
parallaxEnabled If not null and true, SlidingUpPanel will show parallax effects as the panel slides up. Essentially, as the panel slides, the body slides up.
parallaxOffset Allows you to specify the extent of the parallax effect based on the percentage of the panel sliding up/down. The recommended values are between 0.0 and 1.0, with 0.0 ignoring the difference and 1.0 mimicking a one-to-one scrolling effect. The default is 10% parallax.
isDraggable Allows toggle the draggability of SlidingUpPanel. Setting this to false prevents users from dragging the panel up and down. The default is true.
slideDirection Direction of drawer:SlideDirection.UP or SlideDirection.DOWN.
defaultPanelState The default state of the panel; PanelState. OPEN or PanelState. CLOSED. The default value for this value, panelstate. CLOSED, indicates that the panel is in the CLOSED position and must be opened. Panelstate. OPEN indicates that the panel is OPEN by default and must be closed by user sliding.

Practice: A comment drawer that mimics headlines

class ToutiaoDemo extends StatefulWidget {
    ToutiaoDemo({Key key}) : super(key: key);

    @override
    _ToutiaoDemoState createState() => _ToutiaoDemoState();
}

class _ToutiaoDemoState extends State<ToutiaoDemo> {
    PanelController panel = new PanelController();
    double offsetDistance = 0.0;
    double offsetY=0;

    @override
    Widget build(BuildContext context) {
        return Container(
            child: SlidingUpPanel(
                controller:panel,
                minHeight: 0,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(24.0),
                    topRight: Radius.circular(24.0),
                ),
                body: GestureDetector(
                    child: new ConstrainedBox(
                        constraints: BoxConstraints.expand(),
                        child: new Image.asset(
                        "assets/img1.jpg",
                            fit: BoxFit.fill,
                        ),
                    ),
                    onTap: (){
                        panel.close();
                    },
                    onVerticalDragDown: (details){
                        // print(details.globalPosition.dy);
                        offsetDistance=details.globalPosition.dy;
                    },
                    onVerticalDragUpdate: (details){
                        offsetY=details.globalPosition.dy-offsetDistance;
                        if(offsetY>0) {print("Down"+offsetY.toString());
                        }else{
                            print("向上"+offsetY.toString());
                            double position=offsetY.abs()/300;
                            position=position>1?1:position;
                            panel.setPanelPosition(position);
                            if(position>0.4){
                                panel.open();
                            }
                        }
                        
                    },
                ),
                panel: Container(
                    child: Center(
                        child: Text("Comments section",style: TextStyle(color: Colors.grey,fontSize: 16,fontWeight: FontWeight.normal,decoration:TextDecoration.none)), ), ), ), ); }}Copy the code

Effect:

At the end

  • Address of wheel warehouse: pub.flutter-io.cn/packages/sl…
  • Series demo source: github.com/826327700/f…