パッケージ、リポジトリ、アプリカテゴリを検索

GitHub リポジトリpayam-zahedi/flutter_breadcrumb

flutter_breadcrumb

Flutterで簡単にパンくずを生成できるFlutterウィジェット。

flutter_breadcrumb のプロジェクト画像
スター
56
フォーク
10
最終プッシュ(UTC)
2021/05/01
プロジェクト状態
公開中

元の README

以下は英語原文のスナップショットです。最新版は GitHub をご覧ください。

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
Payam Zahedi GitHub avatar
GitHub 作者

Payam Zahedi ↗

A software engineer who loves to learn and draws his passion from his happiness.

@FlaconiGermany
言語DartSwiftJavaKotlinObjective-C

このリポジトリが公開するパッケージ

使用している依存関係

依存関係一覧 3 件

  • flutter{"sdk":"flutter"}
  • pedantic^1.11.0
  • flutter_test開発用{"sdk":"flutter"}

プロジェクトに合うリポジトリを選ぶには?

用途で絞り込み、開発状況を比較し、採用前に元のリポジトリで要件を確認しましょう。

  1. 名前・作者・説明で検索し、技術トピックで絞り込みます。
  2. スター、フォーク、最近のプッシュを比較します。スターは関心の目安であり、品質の保証ではありません。
  3. 利用前に GitHub で README、ライセンス、Issues を確認します。

情報源と管理

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗