这是用户在 2024-9-3 19:56 为 https://pub.dev/packages/flutter_zoom_drawer 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?

flutter_zoom_drawer 3.2.0 copy "flutter_zoom_drawer: ^3.2.0" to clipboard
flutter_zoom_drawer: ^3.2.0 copied to clipboard

A Flutter package with custom implementation of the Side Menu (Drawer)
一个自定义实现侧边菜单(抽屉)的 Flutter 包

Flutter Zoom Drawer # Flutter 缩放抽屉 #

pub package License: MIT

A Flutter package with custom implementation of the Side Menu (Drawer)
一个自定义实现侧边菜单(抽屉)的 Flutter 包

🌟 Getting Started # 🌟 入门 #

To start using this package, add flutter_zoom_drawer dependency to your pubspec.yaml
要开始使用此软件包,请将 flutter_zoom_drawer 依赖项添加到您的 pubspec.yaml

dependencies:
  flutter_zoom_drawer: "<latest_release>"
copied to clipboard

⚠ Version 3 Breaking Changes for Style #
⚠ 第 3 版样式的重大更改 #

Old Style 旧样式 New Style 新样式
DrawerStyle.style1 DrawerStyle.defaultStyle
DrawerStyle.style2 DrawerStyle.defaultStyle
DrawerStyle.style3 DrawerStyle.defaultStyle
DrawerStyle.style4 DrawerStyle.style1
DrawerStyle.style5 DrawerStyle.style2
DrawerStyle.style6 DrawerStyle.style3
DrawerStyle.style7 DrawerStyle.style4

💪 Features # 💪 功能 #

  • Simple sliding drawer 简单滑动抽屉
  • Sliding drawer with shadows
    带阴影的滑动抽屉
  • Sliding drawer with rotation
    旋转滑动抽屉
  • Sliding drawer with rotation and shadows
    带有旋转和阴影的滑动抽屉
  • Support for both LTR & RTL
    支持 LTR 和 RTL

📌 Simple Example (Thanks to @JesusHdezWaterloo) #
📌 简单示例(感谢 @JesusHdezWaterloo) #

import 'package:flutter/material.dart';
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';
import 'package:get/get.dart';

void main() {
  Get.put<MyDrawerController>(MyDrawerController());

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Zoom Drawer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends GetView<MyDrawerController> {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<MyDrawerController>(
      builder: (_) => ZoomDrawer(
        controller: _.zoomDrawerController,
        menuScreen: MenuScreen(),
        mainScreen: MainScreen(),
        borderRadius: 24.0,
        showShadow: true,
        angle: -12.0,
        drawerShadowsBackgroundColor: Colors.grey,
        slideWidth: MediaQuery.of(context).size.width * 0.65,
      ),
    );
  }
}

class MenuScreen extends GetView<MyDrawerController> {
  const MenuScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
    );
  }
}

class MainScreen extends GetView<MyDrawerController> {
  const MainScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.pink,
      child: Center(
        child: ElevatedButton(
          onPressed: controller.toggleDrawer,
          child: Text("Toggle Drawer"),
        ),
      ),
    );
  }
}

class MyDrawerController extends GetxController {
  final zoomDrawerController = ZoomDrawerController();

  void toggleDrawer() {
    print("Toggle drawer");
    zoomDrawerController.toggle?.call();
    update();
  }
}
copied to clipboard

📝 Documentation # 📝 文档 #

    ZoomDrawer(
      controller: ZoomDrawerController,
      style: DrawerStyle.defaultStyle,
      menuScreen: MenuScreen(),
      mainScreen: MainScreen(),
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      drawerShadowsBackgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*.65,
      openCurve: Curves.fastOutSlowIn,
      closeCurve: Curves.bounceIn,
    )
copied to clipboard
Parameters 参数 Value  Required 源文本:必需 翻译文本: Docs 文档
controller ZoomDrawerController No  Controller to have access to the open/close/toggle function of the drawer
控制器可以访问抽屉的打开/关闭/切换功能
style DrawerStyle No  the drawer style to be displayed (check the DrawerStyle enum)
抽屉样式将被显示(查看 DrawerStyle 枚举)
mainScreen Widget Yes  Screen containing the main content to display
包含要显示的主要内容的屏幕
menuScreen Widget Yes  Screen containing the menu/bottom screen
包含菜单/底部屏幕的屏幕
slideWidth double No  Sliding width of the drawer - defaults to 275.0
抽屉的滑动宽度 - 默认为 275.0
slideHeight double No  Sliding height of the drawer - defaults to 0.0
抽屉的滑动高度 - 默认为 0.0
mainScreenScale double No  MainScreen scale - defaults to 0.3
主屏幕缩放 - 默认值为 0.3
borderRadius double No  Border radius of the slided content - defaults to 16.0
滑动内容的边框半径 - 默认为 16.0
angle double No  Rotation angle of the drawer - defaults to -12.0 - should be 0.0 to -30.0
抽屉的旋转角度 - 默认为 -12.0 - 应该在 0.0 到 -30.0 之间
disableGesture bool No  Disable the home page swipe to open drawer gesture - defaults to false
禁用主页滑动打开抽屉手势 - 默认值为 false
drawerShadowsBackgroundColor Color No  Background color of the drawer shadows - defaults to white
抽屉阴影的背景颜色 - 默认为白色
showShadow bool No  Boolean, whether to show the drawer shadows - defaults to false
布尔值,是否显示抽屉阴影 - 默认为 false
openCurve Curve No  open animation curve - defaults to Curves.easeOut
打开动画曲线 - 默认值为 Curves.easeOut
closeCurve Curve No  close animation curve - defaults to Curves.easeOut
关闭动画曲线 - 默认为 Curves.easeOut
mainScreenTapClose bool No  Close drawer when tapping mainScreen
在点击 mainScreen 时关闭抽屉
mainScreenOverlayColor Color No  Color of the main screen's cover overlay
主屏幕覆盖层的颜色
overlayBlend BlendMode No  The BlendMode of the mainScreenOverlayColor filter (default BlendMode.screen)
mainScreenOverlayColor 滤镜的混合模式(默认 BlendMode.screen)
boxShadow BoxShadow No  The Shadow of the mainScreenContent
mainScreenContent 的阴影
overlayBlur double No  The Blur amount of the mainScreen option
mainScreen 选项的模糊量
shrinkMainScreen bool No  Shrinks the mainScreen by [slideWidth], good on desktop with Style2
将主屏幕缩小[slideWidth],在桌面上使用 Style2 效果很好
drawerStyleBuilder DrawerStyleBuilder No  Build custom animated style to override [DrawerStyle]
构建自定义动画样式以覆盖 [DrawerStyle]

🕹️ Drawer Usage # 🕹️ 抽屉使用 #

To use the drawer, and be able to control it, there are 2 ways:
要使用抽屉并能够控制它,有两种方法:

  • Using a ZoomDrawerController inside the main widget where you have the ZoomDrawer widget and providing it to the widget, which will allow you to trigger the open/close/toggle methods.
    在主小部件中使用 ZoomDrawerController ,其中包含 ZoomDrawer 小部件,并将其提供给小部件,这将允许您触发打开/关闭/切换方法。
    final drawerController = ZoomDrawerController();

    drawerController.open();
    drawerController.close();
    drawerController.toggle();
    drawerController.isOpen();
    drawerController.stateNotifier;
copied to clipboard
  • Using the static method inside ancestor widgets to get access to the ZoomDrawer.
    使用祖先小部件中的静态方法来访问 ZoomDrawer
  ZoomDrawer.of(context).open();
  ZoomDrawer.of(context).close();
  ZoomDrawer.of(context).toggle();
  ZoomDrawer.of(context).isOpen();
  ZoomDrawer.of(context).stateNotifier;
copied to clipboard

Screens # 屏幕 #

Example app Demo

Example RTL Demo

  • Drawer Sliding 抽屉滑动
    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MenuScreen(),
      mainScreen: MainScreen(),
      borderRadius: 24.0,
      showShadow: false,
      angle: 0.0,
      drawerShadowsBackgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width * 0.65,
    )
copied to clipboard

Drawer Sliding

  • Drawer Sliding with shadow
    抽屉滑动带阴影
    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MenuScreen(),
      mainScreen: MainScreen(),
      borderRadius: 24.0,
      showShadow: true,
      angle: 0.0,
      drawerShadowsBackgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width * 0.65,
    )
copied to clipboard

Drawer Sliding

  • Drawer Sliding with rotation
    抽屉滑动与旋转
    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MenuScreen(),
      mainScreen: MainScreen(),
      borderRadius: 24.0,
      showShadow: false,
      angle: -12.0,
      drawerShadowsBackgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width * 0.65,
    )
copied to clipboard

Drawer Sliding with rotation

  • Drawer Sliding with rotation and shadows
    抽屉滑动带旋转和阴影
    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MenuScreen(),
      mainScreen: MainScreen(),
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      drawerShadowsBackgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width * 0.65,
    )
copied to clipboard

Drawer Sliding with rotation and shadows

Issues # 问题 #

Please file any issues, bugs or feature request as an issue on our GitHub page.
请在我们的 GitHub 页面上提交任何问题、错误或功能请求作为问题。

Want to contribute # 想要贡献 #

If you would like to contribute to the plugin (e.g. by improving the documentation, solving a bug or adding a cool new feature), please carefully review our contribution guide and send us your pull request.
如果您想为插件做出贡献(例如,通过改进文档、解决错误或添加一个很酷的新功能),请仔细查看我们的贡献指南并向我们发送您的拉取请求。

Credits # 致谢 #

Credits goes to pedromassango as most of this package comes from his implementation.
致谢 pedromassango,因为这个包的大部分内容来自他的实现。

1027
likes
160
pub points
98%
popularity

Publisher

verified publishermedyas.ml

A Flutter package with custom implementation of the Side Menu (Drawer)

Repository (GitHub)
View/report issues
Contributing

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_zoom_drawer