Flutter Zoom Drawer

一个带有自定义侧边菜单 (抽屉) 实现的 Flutter 包。

入门

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

dependencies:
  flutter_zoom_drawer: '<latest_release>'

特点

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

文档

    ZoomDrawer(
      controller: ZoomDrawerController,
      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 必需 文档
控制器 ZoomDrawerController 否 用于访问抽屉打开/关闭/切换功能的控制器
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

控制抽屉

要访问抽屉并进行控制，有两种方法

  • 使用 ZoomDrawerController 在您拥有 ZoomDrawer 小部件的主小部件中，并将其提供给该小部件，这将允许您触发打开/关闭/切换方法。
    final _drawerController = ZoomDrawerController();

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

屏幕

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d317863365877565674706c30524b39494a4564686561674d346431796368516d73

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31594c4336307a4a364e3633375042364951446f3454495859317147534a324554

  • 抽屉滑动
    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: false,
      angle: 0.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(ZoomDrawer.isRTL()? .45: 0.65),
    )

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d3161787554344765683038735f516a6d45443956545a69775a3964435f43313743

  • 带阴影的抽屉滑动
    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: 0.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(ZoomDrawer.isRTL()? .45: 0.65),
    )

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31564e6b5567746a5f6268795967574a5f427333795570564e554a3330546f504c

  • 带旋转的抽屉滑动
    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: false,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(ZoomDrawer.isRTL()? .45: 0.65),
    )

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d317856596f5a486e5339424669354b69635a745033445931764569775a34467948

  • 带旋转和阴影的抽屉滑动
    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(ZoomDrawer.isRTL()? .45: 0.65),
    )

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31622d55323574495933366b6137354a75326a5154394249555648762d6f4e6536

GitHub

https://github.com/medyas/flutter_zoom_drawer