diff --git a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart index 9012b129..6cde9ff3 100644 --- a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart +++ b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart @@ -15,6 +15,7 @@ Widget navigationBarUseCase(BuildContext context) { bool showButton = context.knobs.boolean(label: 'Button'); int? dividerIndex = context.knobs.intOrNull.slider(label: 'Divider', min: 0, max: 6, initialValue: null); bool showSplit = context.knobs.boolean(label: 'Split Items'); + bool shrinkItems = context.knobs.boolean(label: 'Shrink Items'); return StatefulBuilder(builder: (context, setState) { return WidgetbookScaffold( builder: (context, _) => ZetaNavigationBar( @@ -24,6 +25,7 @@ Widget navigationBarUseCase(BuildContext context) { currentIndex: currIndex, splitItems: showSplit, dividerIndex: dividerIndex, + shrinkItems: shrinkItems, ), ); }); diff --git a/lib/src/components/navigation bar/navigation_bar.dart b/lib/src/components/navigation bar/navigation_bar.dart index 3e820713..e30f522c 100644 --- a/lib/src/components/navigation bar/navigation_bar.dart +++ b/lib/src/components/navigation bar/navigation_bar.dart @@ -42,6 +42,7 @@ class ZetaNavigationBar extends ZetaStatelessWidget { this.dividerIndex, this.action, this.semanticLabel, + this.shrinkItems = false, }) : assert( items.length >= 2 && items.length <= 6, 'The number of items should be between 2 and 6', @@ -56,6 +57,7 @@ class ZetaNavigationBar extends ZetaStatelessWidget { this.onTap, this.dividerIndex, this.semanticLabel, + this.shrinkItems = false, }) : splitItems = false, action = null; @@ -70,7 +72,8 @@ class ZetaNavigationBar extends ZetaStatelessWidget { this.dividerIndex, this.semanticLabel, }) : splitItems = true, - action = null; + action = null, + shrinkItems = true; /// Creates a [ZetaNavigationBar] with an action. const ZetaNavigationBar.action({ @@ -81,6 +84,7 @@ class ZetaNavigationBar extends ZetaStatelessWidget { this.currentIndex, this.onTap, this.semanticLabel, + this.shrinkItems = false, }) : dividerIndex = null, splitItems = false; @@ -107,16 +111,25 @@ class ZetaNavigationBar extends ZetaStatelessWidget { /// {@macro zeta-widget-semantic-label} final String? semanticLabel; + /// When set to true the items will shrink to take up less space. + /// This is useful when there are many items in the navigation bar. + /// Defaults to false. + /// When set to false the items will take up equal space and will expand to fill the bar. + final bool shrinkItems; + Row _generateNavigationItemRow(List items, BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: items.map((navItem) { final index = items.indexOf(navItem); - return _NavigationItem( - selected: index == currentIndex, - item: navItem, - onTap: () => onTap?.call(index), - context: context, + return Expanded( + flex: !shrinkItems ? 1 : 0, + child: _NavigationItem( + selected: index == currentIndex, + item: navItem, + onTap: () => onTap?.call(index), + context: context, + ), ); }).toList(), ); @@ -143,21 +156,21 @@ class ZetaNavigationBar extends ZetaStatelessWidget { child = Row( mainAxisAlignment: splitItems ? MainAxisAlignment.spaceBetween : MainAxisAlignment.spaceAround, children: [ - _generateNavigationItemRow(leftItems, context), + Expanded(flex: !shrinkItems ? 1 : 0, child: _generateNavigationItemRow(leftItems, context)), if (dividerIndex != null) Container( color: colors.borderSubtle, width: _navigationItemBorderWidth, height: Zeta.of(context).spacing.xl_7, ), - _generateNavigationItemRow(rightItems, context), + Expanded(flex: !shrinkItems ? 1 : 0, child: _generateNavigationItemRow(rightItems, context)), ], ); } else if (action != null) { child = Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - _generateNavigationItemRow(items, context), + Expanded(flex: !shrinkItems ? 1 : 0, child: _generateNavigationItemRow(items, context)), action!, ], ); @@ -186,7 +199,8 @@ class ZetaNavigationBar extends ZetaStatelessWidget { ..add(ObjectFlagProperty.has('onTap', onTap)) ..add(DiagnosticsProperty('splitItems', splitItems)) ..add(IntProperty('dividerIndex', dividerIndex)) - ..add(StringProperty('semanticLabel', semanticLabel)); + ..add(StringProperty('semanticLabel', semanticLabel)) + ..add(DiagnosticsProperty('shrinkItems', shrinkItems)); } }