https://github.com/payam-zahedi/flutter_breadcrumb
Flutter Widget that can easily create Breadcrumb in Flutter.
https://github.com/payam-zahedi/flutter_breadcrumb
Last synced: 3 months ago
JSON representation
Flutter Widget that can easily create Breadcrumb in Flutter.
- Host: GitHub
- URL: https://github.com/payam-zahedi/flutter_breadcrumb
- Owner: payam-zahedi
- License: bsd-3-clause
- Created: 2020-01-21T19:17:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-01T14:23:59.000Z (about 4 years ago)
- Last Synced: 2025-04-10T09:56:08.914Z (3 months ago)
- Language: Dart
- Size: 24.4 MB
- Stars: 56
- Watchers: 6
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# flutter_breadcrumb
[](https://pub.dartlang.org/packages/flutter_breadcrumb)
[](https://twitter.com/payamzahedi95)
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.
## Show Cases
|Show Case | Wrap Behavior | Scroll Behavior |
| ------------ | ------------ | ------------ |
|  |  |  |
## Getting Start
#### 1. Add it to Your `pubspec.yaml` file as dependency:
```dart
dependencies:
flutter_breadcrumb: ^1.0.1
```
#### 2. Install packages from the command line
```dart
flutter pub get
```
#### 3. Import it to your file
```dart
import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
```
#### 4. Add BreadCrumb widget to your widget tree
```dart
BreadCrumb(
items: [
//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:
```dart
BreadCrumb(
items: [
BreadCrumbItem(content: Text('Item1')),
BreadCrumbItem(content: Text('Item2')),
...
],
divider: Icon(Icons.chevron_right),
)
```
#### 2. Builder named constructor:
```dart
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:
```dart
BreadCrumb(
items: [
//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.
```dart
BreadCrumb(
items: [
//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.
```dart
class CustomOverflowBehavior extends BreadCrumbOverflow{
@override
Widget build(BuildContext context, List items, Widget divider) {
// TODO: implement build
}
@override
// TODO: implement keepLastDivider
bool get keepLastDivider => _keepLastDivider;
@override
List widgetItems(List items, Widget divider) {
// TODO: implement widgetItems
}
}
```
##### * override `widgetItems` method to create `List` 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` items.
------------
## Contribution and Support
#### Feel free for Contributing. your Pull Requests are welcome.
#### if your like this repo please give a star to it. [](https://github.com/payam-zahedi/flutter_breadcrumb)