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

flutter_breadcrumb 封面
套件詳情v1.0.1

flutter_breadcrumb

可在 Flutter 中輕鬆建立麵包屑的 Flutter 小部件。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
18.4萬
喜歡數
130
Pub 分數
140

安裝套件

flutter pub add flutter_breadcrumb

套件介紹

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

一個簡化建立麵包屑導航元件的 Flutter 套件。它提供一個乾淨、可重複使用的 widget 來顯示階層式導航路徑,透過顯示使用者在應用程式結構中的目前位置來提升使用者體驗。適合具有深層導航樹的應用程式,支援自訂並與 Flutter 的路由系統無縫整合。此套件跨平台,可在 Android、iOS、Web、macOS、Windows 及 Linux 上運作。

適用情境

  • 在複雜應用中顯示導航層次結構
  • 改進多層介面中的使用者導向
  • 提升管理員儀表板的使用者體驗
  • 支援電子商務網站中的麵包屑導航
  • 簡化文件門戶中的導航

主要特色

  • 與 Flutter 路由的輕鬆整合
  • 可自定義的外觀和樣式
  • 跨平台相容性
  • 支援動態路徑更新
  • 輕量且無依賴

適合對象

  • 開發複雜導航流程的開發者
  • 專注於使用者引導的UI/UX設計師
  • 需要階層導航的應用程式
  • 具有深度嵌套的 Web 和移動應用程式
  • 優先考慮一致導航模式的團隊

使用建議

  • 動態路由需要手動管理路徑
  • 除了顯示之外,內建互動功能有限
  • 導航堆疊中沒有自動路線檢測
  • 最適合靜態或可預測的導航結構
  • 可能需要額外的邏輯來處理互動式麵包屑

原始 README

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

flutter_breadcrumb

pub package Twitter

Flutter Widget that can easily create Breadcrumb in Flutter.

A breadcrumb or breadcrumb trail is a graphical control element frequently used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain awareness of their locations within applications, documents, or websites.

Flutter Breadcrumb

Show Cases

Show Case Wrap Behavior Scroll Behavior
showcase wrap behaivor scroll behavior

Getting Start

1. Add it to Your pubspec.yaml file as dependency:
dependencies:
  flutter_breadcrumb: ^1.0.1
2. Install packages from the command line
flutter pub get
3. Import it to your file
import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
4. Add BreadCrumb widget to your widget tree
BreadCrumb(
	items: <BreadCrumbItem>[
	//add your BreadCrumbItem here
	],
	divider: Icon(Icons.chevron_right),
)

Create Items

for creating items you can use primary constructor or builder named constructor.
1. Primary constructor:
BreadCrumb(
	items: <BreadCrumbItem>[
		 BreadCrumbItem(content: Text('Item1')),
		 BreadCrumbItem(content: Text('Item2')),
								 ...
	],
	divider: Icon(Icons.chevron_right),
)
2. Builder named constructor:
BreadCrumb.builder(
	itemCount: 8,
	builder: (index) {
		return BreadCrumbItem(content: Text('Item$index'));
	},
	divider: Icon(Icons.chevron_right),
)

Care about Overflow

select a right overflow behavior for your BreadCrumb widget.
1. WrapOverflow behavior: you can use this behavior when you want to your widget, wrap whenever it uses all of the main Side sizes:
BreadCrumb(
	items: <BreadCrumbItem>[
		//add your BreadCrumbItem here
	],
	divider: Icon(Icons.chevron_right),
	overflow: WrapOverflow(
		keepLastDivider: false,
		direction: Axis.horizontal,
	),
)
2. ScrollableOverflow behavior: use it whenever you want to content your widget scroll if it needed.
BreadCrumb(
	items: <BreadCrumbItem>[
		//add your BreadCrumbItem here
	],
	divider: Icon(Icons.chevron_right),
	overflow: ScrollableOverflow(
		keepLastDivider: false,
		reverse: false,
		direction: Axis.horizontal,
	),
)
3. Custom Overflow behavior: you can easily create your own overflow behavior. the only thing you need is to create a class and extends it from the BreadCrumbOverflow class and overwrite its dependencies.

class CustomOverflowBehavior extends BreadCrumbOverflow{
	@override
	Widget build(BuildContext context, List<BreadCrumbItem> items, Widget divider) {
		// TODO: implement build
	}

	@override
	// TODO: implement keepLastDivider
	bool get keepLastDivider => _keepLastDivider;

	@override
	List<Widget> widgetItems(List<BreadCrumbItem> items, Widget divider) {
		// TODO: implement widgetItems
	}
}
* override widgetItems method to create List<Widget> with items and divider parameters.
* override build method to create your own widget behavior. for example wrap behavior uses Wrap widget. and you can use widgetItems method in your build method to create List<Widget> items.

Contribution and Support

Feel free for Contributing. your Pull Requests are welcome.
if your like this repo please give a star to it. pub package

所屬分類

依賴

依賴清單 1 項

  • pedantic^1.11.0

原始碼儲存庫

使用此套件的專案