flutter_zoom_drawer 3.2.0 
flutter_zoom_drawer: ^3.2.0 copied to clipboard
medyas.mlA Flutter package with custom implementation of the Side Menu (Drawer)
一个自定义实现侧边菜单（抽屉）的 Flutter 包
Flutter Zoom Drawer # Flutter 缩放抽屉 #
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
ZoomDrawerControllerinside the main widget where you have theZoomDrawerwidget 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 # 屏幕 #
- 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 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 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 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
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，因为这个包的大部分内容来自他的实现。
Metadata
1027
likes
160
pub points
98%
popularity
Publisher
Metadata
A Flutter package with custom implementation of the Side Menu (Drawer)
Repository (GitHub)
View/report issues
Contributing
Documentation
License
MIT (license)
