Flutter 炫酷抽屉栏

pub package License: MIT

一个包含侧边菜单（抽屉）自定义实现的 Flutter 包

入门

要开始使用此包，请将 awesome_drawer_bar 依赖项添加到您的 pubspec.yaml 文件中

dependencies:
  awesome_drawer_bar: '<latest_release>'

功能

  • 简单的滑动抽屉
  • 带阴影的滑动抽屉
  • 带旋转的滑动抽屉
  • 带旋转和阴影的滑动抽屉
  • 支持 LTR 和 RTL

文档

    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*.65,
      openCurve: Curves.fastOutSlowIn,
      closeCurve: Curves.bounceIn,
    )
参数 Value 必需 文档
控制器 AwesomeDrawerBarController 否 控制器，可访问抽屉的打开/关闭/切换功能
mainScreen Widget 是 包含要显示的主内容的屏幕
menuScreen Widget 是 包含菜单/底部屏幕的屏幕
slideWidth 双精度 否 抽屉的滑动宽度 – 默认为 275.0
borderRadius 双精度 否 滑动内容的圆角 – 默认为 16.0
angle 双精度 否 抽屉的旋转角度 – 默认为 -12.0 – 应为 0.0 到 -30.0
backgroundColor 颜色 否 抽屉阴影的背景颜色 – 默认为白色
showShadow 布尔值 否 布尔值，是否显示抽屉阴影 – 默认为 false
openCurve Curve 否 打开动画曲线 – 默认为 Curves.easeOut
closeCurve Curve 否 关闭动画曲线 – 默认为 Curves.easeOut

控制抽屉

有两种方式可以访问抽屉并控制它

  • 在拥有 AwesomeDrawerBar 小部件的主小部件中使用 AwesomeDrawerBarController 并将其提供给该小部件，这将允许您触发打开/关闭/切换方法。

    final _drawerController = AwesomeDrawerBarController();

    _drawerController.open();
    _drawerController.close();
    _drawerController.toggle();
    _drawerController.isOpen();
    _drawerController.stateNotifier;
  • 使用祖先小部件内的静态方法来访问 AwesomeDrawerBar。

  AwesomeDrawerBar.of(context).open();
  AwesomeDrawerBar.of(context).close();
  AwesomeDrawerBar.of(context).toggle();
  AwesomeDrawerBar.of(context).isOpen();
  AwesomeDrawerBar.of(context).stateNotifier;

屏幕

Example app Demo

Example RTL Demo

  • 抽屉滑动

    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: false,
      angle: 0.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(AwesomeDrawerBar.isRTL()? .45: 0.65),
    )

Drawer Sliding

  • 带阴影的抽屉滑动

    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: 0.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(AwesomeDrawerBar.isRTL()? .45: 0.65),
    )

Drawer Sliding

  • 带旋转的抽屉滑动

    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: false,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(AwesomeDrawerBar.isRTL()? .45: 0.65),
    )

Drawer Sliding with rotation

  • 带旋转和阴影的抽屉滑动

    AwesomeDrawerBar(
      controller: AwesomeDrawerBarController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(AwesomeDrawerBar.isRTL()? .45: 0.65),
    )

Drawer Sliding with rotation and shadows

问题

请在我们的 GitHub 页面上提交任何问题、错误或功能请求。

想贡献

如果您想为插件做贡献（例如，通过改进文档、修复错误或添加很酷的新功能），请仔细阅读我们的 贡献指南 并向我们提交您的 拉取请求。

鸣谢

荣誉归于 pedromassango，因为这个包的大部分内容都来自他的实现。

GitHub

查看 Github