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

bottom_sheet_bar 封面
插件详情v2.3.11

bottom_sheet_bar

一个对齐到小部件底部并扩展为底部表单的工具栏。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
1820
喜欢数
80
Pub 分数
140

安装插件

flutter pub add bottom_sheet_bar

插件介绍

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

BottomSheetBar 是一个 Flutter 包,提供了一个固定在屏幕底部的工具栏,可扩展为完整的底部抽屉。它在紧凑状态和展开状态之间提供平滑的过渡效果,非常适合用于导航、控制或访问额外内容。该组件可自定义,并可在 Android、iOS、Web、macOS、Windows 和 Linux 等主要平台上运行。设计旨在实现直观的用户交互,通过保持关键操作的可访问性,同时避免主界面的杂乱。

适合场景

  • 快速访问控件
  • 带可折叠菜单的导航
  • 带可展开面板的表单输入
  • 媒体播放控制
  • 动态内容过滤

主要特点

  • 底部对齐的工具栏
  • 平滑展开到底部表单
  • 跨平台兼容性
  • 可自定义外观
  • 由手势驱动的打开/关闭
  • 响应式设计

适合对象

  • 以移动设备为优先的应用
  • 交互式仪表板
  • 内容密集型界面
  • 以用户为中心的导航
  • 需要可折叠工具栏的应用程序

使用建议

  • 可能与其他底部叠加层冲突
  • 需要仔细的布局规划
  • 大量内容带来的性能影响
  • 默认状态下自定义选项有限
  • 不适用于全屏模态使用

原始 README

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

bottom_sheet_bar

A toolbar that aligns to the bottom of a widget and expands into a bottom sheet.

Short content Long content Scrollable content
import 'package:bottom_sheet_bar/bottom_sheet_bar.dart';

BottomSheetBar(
    expandedBuilder: (scrollController) => ListView.builder(
        controller: scrollController, 
        itemBuilder: (context, index) => ListTile(title: index.toString()),
        itemCount: 50,
    ),
    collapsed: Text('Collapsed toolbar widget'),
    body: Text('Content overlayed by toolbar and bottom sheet'),
);

BottomSheetBar

Required
  • Widget body - The toolbar will be aligned to the bottom of the body Widget. Padding equal to height is added to the bottom of this widget.
  • Function(ScrollController) expandedBuilder - A function to build the widget displayed when the bottom sheet is expanded. If the expanded content is scrollable, pass the provided ScrollController to the scrollable widget.
Optional
  • Widget collapsed - A Widget to be displayed on the toolbar in its collapsed state
  • BottomSheetBarController controller - A controller can be used to listen to events, and expand and collapse the bottom sheet.
  • Color color - The background color of the toolbar and bottom sheet. Defaults to Colors.white
  • Color backdropColor - The backdrop color that overlays the [body] widget when the bottom sheet is expanded. Defaults to Colors.transparent (no backdrop)
  • BorderRadius borderRadius - Provide a border-radius to adjust the shape of the toolbar
  • BorderRadius borderRadiusExpanded - Provide a border-radius to adjust the shape of the bottom-sheet when expanded
  • List<BoxShadow> boxShadows - Provide shadow decoration to the bottom sheet
  • double height - The height of the collapsed toolbar. Default to kToolbarHeight (56.0)
  • bool isDismissable - If true, the bottom sheet can be dismissed by tapping elsewhere. Defaults to true
  • bool locked - If true, the bottom sheet cannot be opened or closed with a swipe gesture. Defaults to true
  • bool willPopScope - If true, the bottom sheet widget will be wrapped in a WillPopScope widget to handle back-gestures. Defaults to false
  • bool backButtonListener - If true, the bottom sheet widget will be wrapped in a BackButtonListener widget to handle back-gestures. Defaults to false

BottomSheetBarController

A controller used to expand or collapse the bottom sheet of a BottomSheetBar. Listeners can be added to respond to expand and collapse events. The expanded or collapsed state can also be determined through this controller.

  • bool get isCollapsed - Only returns [true] if the bottom sheet if fully collapsed
  • bool get isExpanded - Only returns [true] if the bottom sheet if fully expanded
  • TickerFuture collapse() - Collapse the bottom sheet built by BottomSheetBar.expandedBuilder
  • TickerFuture expand() - Expand the bottom sheet built by BottomSheetBar.expandedBuilder
  • void addListener(Function listener) - Adds a function to be called on every animation frame
  • void removeListener(Function listener) - Removes a previously added listener
  • void dispose() - Removes all previously added listeners
  • void attach(AnimationController animationController) - Used internally to assign the AnimationController created by BottomSheetBar to the controller. Unless you're using advanced animation techniques, you probably won't ever need to use this method.

Example

A quick demonstration can be found in the example directory. To run the example:

flutter run example/main.dart

所属分类

依赖

依赖清单 1 项

源码仓库

使用此插件的项目

暂无相关数据。