flutter好用的輪子推薦十二-flutter一個全屏動效的抽屜組件

前言

Flutter是谷歌的移動UI框架，能夠快速在iOS和Android上構建高質量的原生用戶界面。

IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一概，好用輪子萬里挑一！Flutter做爲這兩年開始崛起的跨平臺開發框架，其第三方生態相比其餘成熟框架還略有不足，但輪子的數量也已經不少了。本系列文章挑選平常app開發經常使用的輪子分享出來，給你們提升搬磚效率，同時也但願flutter的生態愈來愈完善，輪子愈來愈多。

本系列文章準備了超過50個輪子推薦，工做緣由，儘可能每1-2天出一篇文章。

tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網

正文

輪子

• 輪子名稱：hidden_drawer_menu
• 輪子概述：flutter一個全屏動效的抽屜組件.
• 輪子做者：rafaelbarbosatec@gmail.com
• 推薦指數：★★★★
• 經常使用指數：★★★
• 效果預覽：

安裝

dependencies:
 hidden_drawer_menu: ^1.1.2
複製代碼

import 'package:hidden_drawer_menu/hidden_drawer/hidden_drawer_menu.dart';
複製代碼

使用方法

Widget build(BuildContext context) {
    return SimpleHiddenDrawer(
        menu:Menu(), //抽屜區域佈局
        screenSelectedBuilder: (position,controller) {
            return Scaffold( //頁面主體區域
                appBar: AppBar(
                    title: Text("hidden_drawer_menu"),
                ),
                body: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Center(
                            child: Text("當前頁面$position"),
                        ),
                        Center(
                            child: FlatButton(
                                child: Text("打開抽屜"),
                                onPressed: (){
                                    controller.toggle();
                                },
                            ),
                        )
                    ],
                ),
            );
        }
    );
}
複製代碼

抽屜區域佈局內容：

class Menu extends StatefulWidget {
    @override
    _MenuState createState() => _MenuState();
}

class _MenuState extends State<Menu> {
    @override
    Widget build(BuildContext context) {
    return Container(
        width: double.maxFinite,
        height: double.maxFinite,
        color: Colors.cyan,
        padding: const EdgeInsets.all(8.0),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
                FlatButton(
                    child: Text("菜單一",style: TextStyle(color: Colors.white,fontSize: 20)),
                    onPressed: (){
                        SimpleHiddenDrawerProvider.of(context).setSelectedMenuPosition(0);
                    },
                ),
                FlatButton(
                    child: Text("菜單二",style: TextStyle(color: Colors.white,fontSize: 20)),
                    onPressed: (){
                        SimpleHiddenDrawerProvider.of(context).setSelectedMenuPosition(1);
                    },
                )
            ],
        ),
    );
    }
}
複製代碼

控制抽屜開關：

SimpleHiddenDrawerProvider.of(context).toggle();
複製代碼

監聽抽屜按鈕postion：

SimpleHiddenDrawerProvider.of(context).getPositionSelectedListener().listen((position){
  print(position);
});
複製代碼

監聽當前抽屜狀態：

SimpleHiddenDrawerProvider.of(context).getMenuStateListener().listen((state){
  print(state); //closed,opening,open,closing
});
複製代碼

若是隻是做爲抽屜使用，就這麼簡單了。更多用法請查看倉庫文檔。

結尾

• 輪子倉庫地址：pub.flutter-io.cn/packages/hi…
• 系列演示demo源碼：github.com/826327700/f…