搜索插件、代码仓与 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

源码仓库

使用此插件的项目