前言

Flutter是谷歌的移動UI框架驾锰，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面卸留。

IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一律椭豫，好用輪子萬里挑一耻瑟！Flutter作為這兩年開始崛起的跨平臺開發(fā)框架，其第三方生態(tài)相比其他成熟框架還略有不足赏酥，但輪子的數(shù)量也已經(jīng)很多了喳整。本系列文章挑選日常app開發(fā)常用的輪子分享出來，給大家提高搬磚效率裸扶，同時也希望flutter的生態(tài)越來越完善框都，輪子越來越多。

本系列文章準備了超過50個輪子推薦呵晨，工作原因魏保，盡量每1-2天出一篇文章。

tip:本系列文章合適已有部分flutter基礎(chǔ)的開發(fā)者摸屠，入門請戳：flutter官網(wǎng)

正文

輪子

• 輪子名稱：slide_up_panel
• 輪子概述：flutter可定制的上下滑出抽屜.
• 輪子作者：akshath.r.jain@gmail.com
• 推薦指數(shù)：★★★★
• 常用指數(shù)：★★★★

• 效果預(yù)覽：

  
  
  效果圖

安裝

dependencies:
  sliding_up_panel: ^0.3.6

import 'package:sliding_up_panel/sliding_up_panel.dart';

基本使用

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("SlidingUpPanelExample"),
    ),
    body: SlidingUpPanel(
      panel: Center(
        child: Text("這里是抽屜區(qū)"),
      ),
      body: Center(
        child: Text("這么是頁面區(qū)"),
      ),
    ),
  );
}

參數(shù)配置

通過選項可以實現(xiàn)更多控制：

實踐：仿頭條小視頻的評論抽屜

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("向下"+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("評論區(qū)",style: TextStyle(color: Colors.grey,fontSize: 16,fontWeight: FontWeight.normal,decoration:TextDecoration.none)),
                    ),
                ),
            ),
            
        );
    }
}

效果圖：

效果圖

結(jié)尾

• 輪子倉庫地址：https://pub.flutter-io.cn/packages/slide_up_panel
• 系列演示demo源碼：https://github.com/826327700/flutter_plugins_demo