搜尋套件、儲存庫與 APP 分類

ducafecatFlutter 生態導航
bottom_sheet_expandable_bar 封面
套件詳情v0.1.2

bottom_sheet_expandable_bar

一個用於顯示底部欄的套件，具備展開並顯示底部表單的功能

AndroidiOSWebmacOSWindowsLinux
pub.dev API 文件 原始碼
近 30 天下載
54
喜歡數
28
Pub 分數
140

安裝套件

flutter pub add bottom_sheet_expandable_bar

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，提供可展開為底部面板的底部導航列，以顯示額外內容或動作。它透過結合底部列的簡潔性與底部面板的彈性，增強了使用者互動體驗。適用於需要緊湊導航且具備可擴展功能的應用程式，支援 Android、iOS、Web、macOS、Windows 與 Linux 多個平台。此套件輕量級，可無縫整合至現有的 Flutter 專案中。

適用情境

  • 行動應用程式導航，帶可展開選項
  • 透過互動式底端表格增強使用者介面
  • 在網頁和桌面應用程式中建立動態底欄
  • 提供對次要操作的快速存取
  • 跨平台設計響應式佈局

主要特色

  • 可擴展的底部欄介面
  • 支援多個平台
  • 與 Flutter 的輕鬆整合
  • 可自定義的外觀和行為
  • 平滑的動畫過渡
  • 內建手勢處理

適合對象

  • 開發跨平台 Flutter 應用的開發者
  • 尋求互動式導航模式的UI設計師
  • 需要可摺疊操作面板的應用
  • 致力於實現跨平台使用者體驗一致性的專案
  • 希望為高級底部表單功能實現最小化設定的團隊

使用建議

  • 可能需要額外的樣式才能實現複雜的設計
  • 底部抽屜中包含大量內容時的性能影響
  • 超出基本展開/收合之外的自訂功能有限
  • 最適合中等內容量
  • 在較小的設備上需要仔細處理螢幕空間

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Bottom Sheet Expandable Bar

This package create a bottom navigation bar with the capability to show a bottom sheet.

Instalation

Include bottom_sheet_expandable_bar in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  bottom_sheet_expandable_bar: version

Usage

To use this package, just import it into your file and enjoy it.

import 'package:bottom_sheet_expandable_bar/bottom_sheet_bar_icon.dart';
import 'package:bottom_sheet_expandable_bar/bottom_sheet_expandable_bar.dart';

...

bottomSheet: BottomBarSheet(
  children: [
    BottomSheetBarIcon(
      icon: Icon(Icons.home),
      color: Colors.redAccent, 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.person),
      color: Colors.blueAccent, 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.edit),
      color: Colors.blue[800], 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.star),
      color: Colors.orangeAccent, 
      onTap: (){
      },
    ),
  ],
),

...

IMPORTANT: Add this line to your theme to avoid an unexpected behaviour

theme: ThemeData(
  /// Add this line
  bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.transparent),
),
BottomSheetBarIcon

This widget allow to generate a dynamic icon

Properties

Name Description Required Default
icon Widget to put as button icon False
color Color to indicate icon color False Colors.black
onTap Function to handle button on tap True
BottomBarSheet

This widget allow to generate a bottom bar with the capability to expanto to a bottom sheet

Properties

Name Description Required Default
children List of BottomSheetBarIcon widget to show icons within the bar False
buttonPosition ButtonBottomBarPosition to indicate expandable button position (center, end) False ButtonBottomBarPosition.center
backgroundBarColor Color to indicate bottom bar background color False Colors.white
backgroundColor Color to indicate bottom sheet color False Colors.white
showExpandableButton Boolean value to indicate when to show or hide expandable button False False
innerChild Widget to show into the bottom sheet False
bottomRadius Double value to indicate the corners radius for the bottom bar False 50.0
bottomBarHeight Double value to indicate the bottom bar height False 60.0
bottomBarWidth Double value to indicate the bottom bar height False Screen width * 0.9
duration Duration between show or hide the bottom sheet False 250 milliseconds
bottomSheetHeight Double value to indicate the bottom sheet height False Screen height * 0.75
iconExpand Icon to show into the expandable button False Icon(Icons.navigation)
iconColor Expandable button color False Colors.green
onClose Function to call when bottom sheet is closed False (){}
currentIndex Integer value to indicatet which tab is selected False 0
curve Curve to use on enter bottom sheet animation False Curves.ease
Expandable button at center

Expandable button at end

As a simple navigation bar

所屬分類

底部導航欄

原始碼儲存庫

使用此套件的專案

暫無相關資料。