flutter好用的轮子推荐十二-flutter一个全屏动效的抽屉组件

前言

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。

本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者，入门请戳：flutter官网

正文

轮子

• 轮子名称：hidden_drawer_menu
• 轮子概述：flutter一个全屏动效的抽屉组件.
• 轮子作者：[email protected]
• 推荐指数：★★★★
• 常用指数：★★★
• 效果预览：

安装

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: [
 Center(
 child: Text("当前页面$position"),
 ),
 Center(
 child: FlatButton(
 child: Text("打开抽屉"),
 onPressed: (){
 controller.toggle();
 },
 ),
 )
 ],
 ),
 );
 }
 );
}

抽屉区域布局内容：

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

class _MenuState extends State {
 @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: [
 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
});

如果只是作为抽屉使用，就这么简单了。更多用法请查看仓库文档。