flutter_breadcrumb 0.1.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 89

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 CaseWrap BehaviorScroll Behavior
showcasewrap behaivorscroll behavior

Getting Start #

1. Add it to Your pubspec.yaml file as dependency:

dependencies:
  flutter_breadcrumb: ^0.1.2

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

(0.1.2) #

README.md updated

  • README.md file bug fixed

(0.1.1) #

file optimization

  • Gif files optimized

(0.1.0) #

first stable version added

  • Example completed
  • Readme.md created

(0.0.1) #

Initial version of the package is available include below features:

  • create breadcrumb with the builder pattern
  • create breadcrumb that is wrappable
  • create breadcrumb that is scrollable

example/lib/main.dart

import 'package:example/res/res.dart';
import 'package:example/screen/home.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ExampleStrings.breadcrumb,
      theme: ThemeData(
        primarySwatch: ExampleColors.primary,
        accentColor: ExampleColors.accent,
        backgroundColor: ExampleColors.background,
        scaffoldBackgroundColor: ExampleColors.background,
        buttonTheme: ButtonThemeData(
          minWidth: 40,
          height: 40,
          buttonColor: ExampleColors.primary,
          splashColor: ExampleColors.accent,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(4),
          ),
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
          textTheme: ButtonTextTheme.normal,
          colorScheme: ColorScheme.dark(),
        ),
        textTheme: TextTheme(
          button: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
        ),
      ),
      home: Home(),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_breadcrumb: ^0.1.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
79
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
89
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • flutter_breadcrumb that is a package requiring null.

Health suggestions

Format lib/flutter_breadcrumb.dart.

Run flutter format to format lib/flutter_breadcrumb.dart.

Format lib/src/breadcrumb.dart.

Run flutter format to format lib/src/breadcrumb.dart.

Format lib/src/breadcrumb_overflow.dart.

Run flutter format to format lib/src/breadcrumb_overflow.dart.

Format lib/src/breadcrumb_widget.dart.

Run flutter format to format lib/src/breadcrumb_widget.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.5.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test