插件详情v3.0.2

flutter_slider_drawer

一个带有自定义滑动抽屉菜单实现的 Flutter 包

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 7860
喜欢数: 597
Pub 分数: 160

安装插件

flutter pub add flutter_slider_drawer

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包，提供可自定义的滑动抽屉菜单，具有独特且流畅的滑动动画。专为移动和 Web 应用中的直观导航设计，是标准导航抽屉的现代替代方案。该包支持 Android、iOS、Web、macOS、Windows 和 Linux 多个平台，确保在不同设备上行为一致。轻量级实现，通过 pub 可轻松集成，开发者可以快速为应用添加交互式侧边菜单。自定义选项包括滑动手势、动画速度和样式。非常适合需要简洁、手势驱动导航体验的应用。

适合场景

移动应用导航
Web 仪表板侧边栏
基于手势的菜单交互
跨平台 UI 一致性
可自定义的滑入菜单

主要特点

平滑的滑动动画
手势支持
跨平台兼容性
可自定义外观
轻松集成公共发布

适合对象

寻求现代导航的开发者
需要可滑动侧边面板的应用
面向多个平台的项目
以用户界面为重点的 Flutter 应用程序
想要动画抽屉的设计者

使用建议

限制为抽屉式布局
需要手动处理嵌套导航
可能需要额外的状态管理
不适用于复杂的多级菜单
动画性能取决于设备功能

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Flutter Slider Drawer

A Flutter package with custom implementation of the Slider Drawer Menu

To start using this package, add flutter_slider_drawer dependency to your pubspec.yaml

dependencies:
  flutter_slider_drawer: '<latest_release>'

Features

Slider with custom animation time
Provide Basic Appbar with customization of color and title
Dynamic slider open and close offset
Provide drawer icon animation
Provide shadow of Main screen with customization of shadow colors,blurRadius and spreadRadius
Provide RTL(RightToLeft),LTR(LeftToRight) and TTB(TopToBottom) slider open selection
Provide Custom Appbar support and you can also use plugin appBar with use of SliderAppBar widget
If you are using CupertinoApp then pass isCupertino: true

Code

  Widget build(BuildContext context) {
    return Scaffold(
      body: SliderDrawer(
        key: _sliderDrawerKey,
        appBar: SliderAppBar(
          config: SliderAppBarConfig(
            title: Text(
              title,
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.w700,
              ),
            ),
          ),
        ),
        sliderOpenSize: 179,
        slider: Container(color: Colors.red),
        child: Container(color: Colors.amber),
      ),
    );
  }

Slider open

SliderOpen.LEFT_TO_RIGHT	SliderOpen.RIGHT_TO_LEFT	SliderOpen.TOP_TO_BOTTOM

Controlling the drawer

class _MyAppState extends State<MyApp> {
   GlobalKey<SliderDrawerState> _sliderDrawerKey =
      GlobalKey<SliderDrawerState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SliderDrawer(
        key: _sliderDrawerKey,
        appBar: SliderAppBar(
          config: SliderAppBarConfig(
            title: Text(
              title,
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.w700,
              ),
            ),
          ),
        ),
        sliderOpenSize: 179,
        slider: Container(color: Colors.red),
        child: Container(color: Colors.amber),
      ),
    );
  }
}

Using the below methods to control drawer .

 _sliderDrawerKey.currentState.closeDrawer();
 _sliderDrawerKey.currentState.openDrawer();
 _sliderDrawerKey.currentState.toggle();
 _sliderDrawerKey.currentState.isDrawerOpen();