美文网首页FlutterFlutter 案例学习
flutter好用的轮子推荐十二-flutter一个全屏动效的抽

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

作者: IT小孢子 | 来源:发表于2019-11-12 10:19 被阅读0次

    前言

    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
    });
    

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

    结尾

    相关文章

      网友评论

        本文标题:flutter好用的轮子推荐十二-flutter一个全屏动效的抽

        本文链接:https://www.haomeiwen.com/subject/owsfictx.html