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

bottom_drawer 封面
插件详情v0.0.5

bottom_drawer

一个底部抽屉小部件,支持自定义抽屉头部和主体,支持列表主体,支持拖动打开和关闭。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
663
喜欢数
36
Pub 分数
150

安装插件

flutter pub add bottom_drawer

插件介绍

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

一个可自定义的底部抽屉小部件,适用于 Flutter,支持拖动打开和关闭,可选的标题和主体自定义。它可以显示静态内容或基于列表的主体,非常适合用于模态框、筛选器或补充信息面板。该抽屉可适应各种平台,包括移动设备、网页和桌面端,确保在不同设备上提供一致的用户体验。设计简洁灵活,可无缝集成到现有的 Flutter 应用中。

适合场景

  • 模态覆盖
  • 筛选面板
  • 补充内容显示
  • 交互式底部弹出层
  • 表单输入
  • 导航抽屉

主要特点

  • 拖动以打开/关闭手势
  • 可定制的标题和正文
  • 列表正文支持
  • 跨平台兼容性
  • 与现有小部件的轻松集成
  • 可配置的动画和行为

适合对象

  • 开发交互式 UI 的开发者
  • 需要可折叠面板的应用
  • 需要跨平台底部弹窗的项目
  • 希望灵活抽屉布局的设计师
  • 注重流畅用户体验的团队

使用建议

  • 可能需要额外的样式来处理复杂的标题
  • 大型列表的性能影响
  • 内置动画功能有限,仅限基本滑动
  • 不适用于全屏模态框
  • 需要仔细处理嵌套可滚动组件上的触摸事件

原始 README

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

Bottom Drawer for Flutter Pub version

Bottom Drawer.

DEMO

1. Add dependency
dependencies:
  bottom_drawer: ^0.0.5
2. Import bottom drawer
import 'package:bottom_drawer/bottom_drawer.dart';
3. Use bottom drawer

Create a bottom drawer controller.

/// create a bottom drawer controller to control the drawer.
BottomDrawerController controller = BottomDrawerController();

Build a bottom drawer widget.

/// return a bottom drawer widget.
Widget buildBottomDrawer(BuildContext context) {
  return BottomDrawer(
    /// your customized drawer header.
    header: Container(),
    /// your customized drawer body.
    body: Container(),
    /// your customized drawer header height.
    headerHeight: 60.0,
    /// your customized drawer body height.
    drawerHeight: 180.0,
    /// drawer background color.
    color: Colors.lightBlue,
    /// drawer controller.
    controller: controller,
  );
}

Control the bottom drawer.

/// open the bottom drawer.
controller.open();

/// close the bottom drawer.
controller.close();

For more information, see the example.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。