搜尋套件、儲存庫與 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 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。