搜索插件、代码仓与 APP 分类

flutter_inner_drawer 封面
插件详情v1.0.0+1

flutter_inner_drawer

内部抽屉是一种轻松创建内部侧边栏(左/右)的方法,您可以在其中插入列表菜单或其他内容。

近 30 天下载
163
喜欢数
482
Pub 分数
70

安装插件

flutter pub add flutter_inner_drawer

插件介绍

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

Flutter Inner Drawer 是一个轻量级包,可让开发者在 Flutter 应用中实现内部侧边抽屉(左或右)。它提供了一种简单且可自定义的方法,用于添加导航菜单或额外的内容区域,而不会干扰主 UI 流程。抽屉从屏幕边缘滑入,提供干净现代的用户体验。支持水平和垂直手势来打开和关闭,可与现有小部件无缝集成。非常适合需要紧凑、易访问导航面板的应用。

适合场景

  • 添加可折叠的导航菜单
  • 创建上下文操作面板
  • 实施基于侧面的过滤器或设置
  • 通过隐藏内容增强移动应用布局
  • 使用嵌套抽屉设计响应式界面

主要特点

  • 与现有小部件的轻松集成
  • 支持左侧和右侧抽屉位置
  • 手势驱动的打开/关闭交互
  • 可自定义的动画和样式
  • 轻量且高效
  • 可配置的抽屉宽度和对齐方式

适合对象

  • 寻求直观导航的移动应用开发者
  • 想要简洁侧面板的设计人员
  • 需要极简但功能齐全的用户界面的应用程序
  • 使用材料设计原则的项目
  • 致力于流畅手势交互的开发者

使用建议

  • 可能需要仔细处理重叠内容
  • 对复杂嵌套抽屉的内置支持有限
  • 不适合全屏叠加场景
  • 需要关注触摸手势的可访问性
  • 最适合单级导航结构

原始 README

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

flutter_inner_drawer

pub package Awesome Flutter Donate

Inner Drawer is an easy way to create an internal side section (left/right) where you can insert a list menu or other.

Installing

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_inner_drawer: "^1.0.0+1"

Demo

Simple usage
import 'package:flutter_inner_drawer/inner_drawer.dart';
.
.
.
   
    @override
    Widget build(BuildContext context)
    {
        return InnerDrawer(
            key: _innerDrawerKey,
            onTapClose: true, // default false
            swipe: true, // default true            
            colorTransitionChild: Color.red, // default Color.black54
            colorTransitionScaffold: Color.black54, // default Color.black54
            
            //When setting the vertical offset, be sure to use only top or bottom
            offset: IDOffset.only(bottom: 0.05, right: 0.0, left: 0.0),
            
            scale: IDOffset.horizontal( 0.8 ), // set the offset in both directions
            
            proportionalChildArea : true, // default true
            borderRadius: 50, // default 0
            leftAnimationType: InnerDrawerAnimation.static, // default static
            rightAnimationType: InnerDrawerAnimation.quadratic,
            backgroundDecoration: BoxDecoration(color: Colors.red ), // default  Theme.of(context).backgroundColor
            
            //when a pointer that is in contact with the screen and moves to the right or left            
            onDragUpdate: (double val, InnerDrawerDirection direction) {
                // return values between 1 and 0
                print(val);
                // check if the swipe is to the right or to the left
                print(direction==InnerDrawerDirection.start);
            },
            
            innerDrawerCallback: (a) => print(a), // return  true (open) or false (close)
            leftChild: Container(), // required if rightChild is not set
            rightChild: Container(), // required if leftChild is not set
            
            //  A Scaffold is generally used but you are free to use other widgets
            // Note: use "automaticallyImplyLeading: false" if you do not personalize "leading" of Bar
            scaffold: Scaffold(
                appBar: AppBar(
                    automaticallyImplyLeading: false
                ),
            ) 
            /* OR
            CupertinoPageScaffold(                
                navigationBar: CupertinoNavigationBar(
                    automaticallyImplyLeading: false
                ),
            ), 
            */
        )
    }
    
    //  Current State of InnerDrawerState
    final GlobalKey<InnerDrawerState> _innerDrawerKey = GlobalKey<InnerDrawerState>();    

    void _toggle()
    {
       _innerDrawerKey.currentState.toggle(
       // direction is optional 
       // if not set, the last direction will be used
       //InnerDrawerDirection.start OR InnerDrawerDirection.end                        
        direction: InnerDrawerDirection.end 
       );
    }
    
InnerDrawer Parameters
PropName Description default value
scaffold A Scaffold is generally used but you are free to use other widgets required
leftChild Inner Widget required if rightChild is not set
rightChild Inner Widget required if leftChild is not set
leftOffset(deprecated) Offset drawer width 0.4
rightOffset(deprecated) Offset drawer width 0.4
leftScale(deprecated) Left scaffold scaling 1
rightScale(deprecated) Right scaffold scaling 1
offset Offset InnerDrawer width IDOffset.horizontal(0.4)
scale Scaffold scaling IDOffset.horizontal(1)
proportionalChildArea If true, dynamically sets the width based on the selected offset, otherwise it leaves the width at 100% of the screen. true
borderRadius For scaffold border 0
onTapClose Tap on the Scaffold closes it false
swipe activate or deactivate the swipe true
swipeChild activate or deactivate the swipeChild false
duration Animation Controller duration Duration(milliseconds: 246)
velocity Allows you to set the opening and closing velocity when using the open/close methods 1
tapScaffoldEnabled Possibility to tap the scaffold even when open false
boxShadow BoxShadow of scaffold opened [BoxShadow(color: Colors.black.withOpacity(0.5),blurRadius: 5)]
colorTransitionChild Change background color while swiping Colors.black54
colorTransitionScaffold Change background color while swiping Colors.black54
leftAnimationType static / linear / quadratic static
rightAnimationType static / linear / quadratic static
backgroundDecoration possibility to manage the main background Decoration BoxDecoration(color: Theme.of(context).backgroundColor)
innerDrawerCallback Optional callback that is called when a InnerDrawer is opened or closed
onDragUpdate When a pointer that is in contact with the screen and moves to the right or left
_innerDrawerKey.currentState.open Current State of GlobalKey(check example) - OPEN
_innerDrawerKey.currentState.close Current State of GlobalKey(check example) - CLOSE
_innerDrawerKey.currentState.toggle Current State of GlobalKey(check example) - OPEN or CLOSE

Donate

It takes time to carry on this project. If you found it useful or learned something from the source code please consider the idea of donating 5, 20, 50 € or whatever you can to support the project.

  • Donate

Issues

If you encounter problems, open an issue. Pull request are also welcome.

所属分类

源码仓库

使用此插件的项目