diff --git a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart new file mode 100644 index 00000000..c7e20dbd --- /dev/null +++ b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart @@ -0,0 +1,99 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../test/test_components.dart'; + +WidgetbookComponent navigationBarWidgetbook() { + return WidgetbookComponent( + name: 'Navigation Bar', + isInitiallyExpanded: false, + useCases: [ + WidgetbookUseCase( + name: 'Navigation bar', + builder: (context) { + final items = [ + ZetaNavigationBarItem( + icon: ZetaIcons.star_round, + label: 'Label', + showBadge: true, + badgeValue: 2, + ), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ]; + return WidgetbookTestWidget( + widget: Center( + child: ZetaNavigationBar( + items: items, + currentIndex: context.knobs.intOrNull.input( + label: 'Selected index', + initialValue: 0, + ), + ), + ), + ); + }, + ), + WidgetbookUseCase( + name: 'Divided navigation bar', + builder: (context) { + final items = [ + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ]; + return WidgetbookTestWidget( + widget: Center( + child: ZetaNavigationBar.divided( + items: items, + dividerIndex: context.knobs.intOrNull.input( + label: 'Divider index', + initialValue: 3, + ), + ), + ), + ); + }, + ), + WidgetbookUseCase( + name: 'Split navigation bar', + builder: (context) { + final items = [ + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ]; + return WidgetbookTestWidget( + widget: Center( + child: ZetaNavigationBar.split(items: items), + ), + ); + }, + ), + WidgetbookUseCase( + name: 'Navigation bar with action', + builder: (context) { + final items = [ + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ]; + return WidgetbookTestWidget( + widget: Center( + child: ZetaNavigationBar.action( + items: items, + action: ZetaButton.primary(label: 'Button'), + ), + ), + ); + }, + ), + ], + ); +} diff --git a/example/widgetbook/widgetbook.dart b/example/widgetbook/widgetbook.dart index 2179ec35..b80f99da 100644 --- a/example/widgetbook/widgetbook.dart +++ b/example/widgetbook/widgetbook.dart @@ -10,6 +10,7 @@ import 'pages/components/bottom_sheet_widgetbook.dart'; import 'pages/components/button_widgetbook.dart'; import 'pages/components/checkbox_widgetbook.dart'; import 'pages/components/dial_pad_widgetbook.dart'; +import 'pages/components/navigation_bar_widgetbook.dart'; import 'pages/theme/color_widgetbook.dart'; import 'pages/components/banner_widgetbook.dart'; import 'pages/components/chip_widgetbook.dart'; @@ -41,6 +42,7 @@ class HotReload extends StatelessWidget { passwordInputWidgetBook(), bottomSheetWidgetBook(), dialPadWidgetbook(), + navigationBarWidgetbook(), ]..sort((a, b) => a.name.compareTo(b.name)), ), WidgetbookCategory( diff --git a/lib/src/components/navigation bar/navigation_bar.dart b/lib/src/components/navigation bar/navigation_bar.dart index 7d77caf3..e0fb05cc 100644 --- a/lib/src/components/navigation bar/navigation_bar.dart +++ b/lib/src/components/navigation bar/navigation_bar.dart @@ -53,7 +53,7 @@ class ZetaNavigationBar extends StatelessWidget { items: items, currentIndex: currentIndex, onTap: onTap, - splitItems: true, + splitItems: false, dividerIndex: dividerIndex, key: key, ); @@ -136,11 +136,17 @@ class ZetaNavigationBar extends StatelessWidget { rightItems.add(items[i]); } } + child = Row( mainAxisAlignment: splitItems ? MainAxisAlignment.spaceBetween : MainAxisAlignment.spaceAround, children: [ _generateNavigationItemRow(leftItems), - if (dividerIndex != null) Container(color: colors.borderSubtle, width: 1, height: 44), + if (dividerIndex != null) + Container( + color: colors.borderSubtle, + width: 1, + height: 44, + ), _generateNavigationItemRow(rightItems), ], );