Bread cumb

Bread crumb:
 
Show the location of the current page in a navigation hierarchy that automatically adds separators
Different styles, sizes and states of bread crumbs are prepared by flutter code in admin panel:
 

Breadcrumb with solid structure in different colors
Static bread crumb Breadcrumb with solid structure in different sizes
Breadcrumb with icon separator
Breadcrumb with typing elements separator


Breadcrumb with solid structure in different colors:

these are bredcrumbs in different sizes located in:
es_flutter_component/lib/components/es_bread_crumb/bread_crumb_navigator.dart'
and is used as:
// first 
 navigatorObservers: [AppNavigatorObserver()], 
 should be added in the MaterialApp of the main.dart file  
// Then 
// set route as 
 class PanelBreadCrumbSample extends StatelessWidget {
                     static MaterialPageRoute getRoute() => MaterialPageRoute(
                     settings: RouteSettings(name: 'breadcrumb'),
                     builder: (context) => PanelBreadCrumbSample()); ... BreadCrumbNavigator.shaped(
                currentRoute: AppLocalizations.of(context)!.components,
                breadButtonType: BreadButtonType.shaped,
                backgroundColor: StructureBuilder.styles!.secondaryColor,
                textColor: StructureBuilder.styles!.textColor().secondary,
              ),
 
           //   and finally navigate to other pages by 
 
               Navigator.push(context, PanelLabelSample.getRoute());



Static bread crumb:

It is static bredcrumb located in:
es_flutter_component/lib/components/es_bread_crumb/static_bread_crumb_navigator.dart'
and is used as:

//first 
navigatorObservers: [AppNavigatorObserver()], 
should be added in the MaterialApp of the main.dart file 
//Then 
//set routes like : 
class PanelBreadCrumbSample extends StatelessWidget {
static const routeName = '/panelBreadCrumbSample'; ... StaticBreadCrumbNavigator.simple(

currentRoute: AppLocalizations.of(context)!.breadcrumb,
breadButtonType: BreadButtonType.shaped,
routNameList: [
'/panelBreadCrumbSample',
'/esRecoverPassword',
'/esSignin',
],
),



Breadcrumb with solid structure in different sizes:

these are bredcrumbs in different sizes located in:
es_flutter_component/lib/components/es_bread_crumb/bread_crumb_navigator.dart'
and is used as:


//first 
navigatorObservers: [AppNavigatorObserver()], 
//should be added in the MaterialApp of the main.dart file 
//Then 
//set route as 
class PanelBreadCrumbSample extends StatelessWidget {
static const routeName = '/panelBreadCrumbSample'; ... BreadCrumbNavigator.shaped(
currentRoute: 'AppLocalizations.of(context)!.breadcrumb,
breadButtonType: BreadButtonType.shaped,
padding: StructureBuilder.dims!.h2Padding,
),

//and finally navigate to other pages by 

Navigator.push(context, PanelLabelSample.getRoute());



Breadcrumb with icon separator:

these are breadcrumbs with icon separator located in:
es_flutter_component/lib/components/es_bread_crumb/bread_crumb_navigator.dart'
and is used as:

//first 
navigatorObservers: [AppNavigatorObserver()], 
should be added in the MaterialApp of the main.dart file 
//Then 
//set route as 
class PanelBreadCrumbSample extends StatelessWidget {
static const routeName = '/panelBreadCrumbSample'; ... BreadCrumbNavigator.icon(
currentRoute: AppLocalizations.of(context)!.components,
breadButtonType: BreadButtonType.icon,
rtlSuffixIcon: EsSvgIcon('packages/es_flutter_component/assets/svgs/CaretLeft.svg",
size: StructureBuilder.dims!.h2IconSize,
color: StructureBuilder.styles!.primaryColor,
),
ltrSuffixIcon: EsSvgIcon('packages/es_flutter_component/assets/svgs/CaretRight.svg",
size: StructureBuilder.dims!.h2IconSize,
color: StructureBuilder.styles!.primaryColor,),

),

//and finally navigate to other pages by 

Navigator.push(context, PanelLabelSample.getRoute());



Breadcrumb with typing elements separator:

these are breadcrumbs with typing elements seprator located in:
es_flutter_component/lib/components/es_bread_crumb/bread_crumb_navigator.dart'
and is used as:


//first 
navigatorObservers: [AppNavigatorObserver()], 
should be added in the MaterialApp of the main.dart file 
//Then 
//set route as 
class PanelBreadCrumbSample extends StatelessWidget {
static const routeName = '/panelBreadCrumbSample'; ... BreadCrumbNavigator.simple(
currentRoute: AppLocalizations.of(context)!.components,
suffix: EsHeader(
" > ",
color: StructureBuilder.styles!.primaryColor,
),
), 

//and finally navigate to other pages by 

Navigator.push(context, PanelLabelSample.getRoute());