Search packages, repositories and app categories

flutter_breadcrumb cover
Package detailsv1.0.1

flutter_breadcrumb

Flutter Widget that can easily create Breadcrumb in Flutter.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
184K
Likes
130
Pub points
140

Install package

flutter pub add flutter_breadcrumb

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that simplifies the creation of breadcrumb navigation components. It provides a clean, reusable widget to display hierarchical navigation paths, enhancing user experience by showing the current location within an app's structure. Ideal for apps with deep navigation trees, it supports customization and integrates seamlessly with Flutter’s routing system. The package is cross-platform, working on Android, iOS, Web, macOS, Windows, and Linux.

Use cases

  • Displaying navigation hierarchy in complex apps
  • Improving user orientation in multi-level interfaces
  • Enhancing UX in admin dashboards
  • Supporting breadcrumb trails in e-commerce sites
  • Simplifying navigation in documentation portals

Key features

  • Easy integration with Flutter routing
  • Customizable appearance and styling
  • Cross-platform compatibility
  • Supports dynamic path updates
  • Lightweight and dependency-free

Suitable for

  • Developers building complex navigation flows
  • UI/UX designers focusing on user guidance
  • Apps requiring hierarchical navigation
  • Web and mobile applications with deep nesting
  • Teams prioritizing consistent navigation patterns

Considerations

  • Requires manual path management for dynamic routes
  • Limited built-in interaction beyond display
  • No automatic route detection from navigator stack
  • Best suited for static or predictable navigation structures
  • May need additional logic for interactive breadcrumbs

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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

Categories

Dependencies

Dependency list 1 items

  • pedantic^1.11.0

Source repository

Projects using this package