前言
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。
IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一律，好用輪子萬里挑一！Flutter作為這兩年開始崛起的跨平臺開發框架，其第三方生態相比其他成熟框架還略有不足，但輪子的數量也已經很多了。本系列文章挑選日常app開發常用的輪子分享出來，給大家提高搬磚效率，同時也希望flutter的生態越來越完善，輪子越來越多。
本系列文章準備了超過50個輪子推薦，工作原因，儘量每1-2天出一篇文章。
tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網
正文
輪子
輪子名稱：slide_up_panel輪子概述：flutter可定製的上下滑出抽屜.輪子作者：akshath.r.jain@gmail.com推薦指數：★★★★常用指數：★★★★效果預覽：安裝
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("這裡是抽屜區"), ), body: Center( child: Text("這麼是頁面區"), ), ), ); }
參數配置
通過選項可以實現更多控制：
實踐：仿頭條小視頻的評論抽屜
class ToutiaoDemo extends StatefulWidget { ToutiaoDemo({Key key}) : super(key: key); @override _ToutiaoDemoState createState() => _ToutiaoDemoState(); } class _ToutiaoDemoState extends State { 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("評論區",style: TextStyle(color: Colors.grey,fontSize: 16,fontWeight: FontWeight.normal,decoration:TextDecoration.none)), ), ), ), ); } }
效果圖：