From 0986af49a61c597de0329f09bf522e59885fac72 Mon Sep 17 00:00:00 2001 From: Luke Date: Mon, 4 Mar 2024 12:31:59 +0000 Subject: [PATCH] Fix spacing, change badge logic, update widgetbook and example --- .../components/navigation_bar_example.dart | 17 +-- .../components/navigation_bar_widgetbook.dart | 121 +++++------------- example/widgetbook/test/test_components.dart | 14 +- example/widgetbook/widgetbook.dart | 2 +- lib/src/components/badges/indicator.dart | 6 +- .../navigation bar/navigation_bar.dart | 81 ++++++------ 6 files changed, 82 insertions(+), 159 deletions(-) diff --git a/example/lib/pages/components/navigation_bar_example.dart b/example/lib/pages/components/navigation_bar_example.dart index 21c0cb6a..87731510 100644 --- a/example/lib/pages/components/navigation_bar_example.dart +++ b/example/lib/pages/components/navigation_bar_example.dart @@ -17,12 +17,7 @@ class _NavigationBarExampleState extends State { @override Widget build(BuildContext context) { final items = [ - ZetaNavigationBarItem( - icon: ZetaIcons.star_round, - label: 'Label', - showBadge: true, - badgeValue: 2, - ), + ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label', badge: ZetaIndicator(value: 2)), ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), @@ -55,16 +50,6 @@ class _NavigationBarExampleState extends State { selectedIndex = val; }), ), - // bottomNavigationBar: BottomNavigationBar(items: [ - // BottomNavigationBarItem( - // icon: Icon(ZetaIcons.star_round), - // label: 'Label', - // ), - // BottomNavigationBarItem( - // icon: Icon(ZetaIcons.star_round), - // label: 'Label', - // ) - // ]), ); } } diff --git a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart index c7e20dbd..ce03347b 100644 --- a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart +++ b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart @@ -1,99 +1,38 @@ import 'package:flutter/material.dart'; +import 'package:flutter/widgets.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'), - ), - ), - ); - }, - ), - ], +Widget navigationBarUseCase(BuildContext context) { + List items = List.generate( + context.knobs.int.slider(label: 'Items', min: 2, max: 6, initialValue: 2), + (index) => ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label $index'), ); + int currIndex = 0; + 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'); + return StatefulBuilder(builder: (context, setState) { + double width = (items.length * 90) + (showSplit ? 90 : 0) + (dividerIndex != null ? 90 : 0) + (showButton ? 90 : 0); + return Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Expanded( + child: WidgetbookTestWidget( + screenSize: Size(width, 260), + widget: ZetaNavigationBar( + items: items, + action: showButton ? ZetaButton.primary(label: 'Button', onPressed: () {}) : null, + onTap: (i) => setState(() => currIndex = i), + currentIndex: currIndex, + splitItems: showSplit, + dividerIndex: dividerIndex, + ), + ), + ), + ], + ); + }); } diff --git a/example/widgetbook/test/test_components.dart b/example/widgetbook/test/test_components.dart index c6d62693..532d222d 100644 --- a/example/widgetbook/test/test_components.dart +++ b/example/widgetbook/test/test_components.dart @@ -20,12 +20,14 @@ class WidgetbookTestWidget extends StatelessWidget { backgroundColor: Colors.transparent, body: removeBody ? widget - : SizedBox( - width: size.width, - height: size.height, - child: MediaQuery( - data: MediaQueryData(size: Size(size.width, size.height)), - child: SingleChildScrollView(child: widget), + : Center( + child: SizedBox( + width: size.width, + height: size.height, + child: MediaQuery( + data: MediaQueryData(size: Size(size.width, size.height)), + child: SingleChildScrollView(child: widget), + ), ), ), ); diff --git a/example/widgetbook/widgetbook.dart b/example/widgetbook/widgetbook.dart index b80f99da..6fc36259 100644 --- a/example/widgetbook/widgetbook.dart +++ b/example/widgetbook/widgetbook.dart @@ -42,7 +42,7 @@ class HotReload extends StatelessWidget { passwordInputWidgetBook(), bottomSheetWidgetBook(), dialPadWidgetbook(), - navigationBarWidgetbook(), + WidgetbookUseCase(name: 'Navigation Bar', builder: (context) => navigationBarUseCase(context)) ]..sort((a, b) => a.name.compareTo(b.name)), ), WidgetbookCategory( diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart index 52785236..baf8f4d0 100644 --- a/lib/src/components/badges/indicator.dart +++ b/lib/src/components/badges/indicator.dart @@ -18,7 +18,7 @@ class ZetaIndicator extends StatelessWidget { /// Constructor for [ZetaIndicator]. const ZetaIndicator({ super.key, - required this.type, + this.type = ZetaIndicatorType.notification, this.size = ZetaWidgetSize.large, this.icon, this.value, @@ -44,12 +44,16 @@ class ZetaIndicator extends StatelessWidget { }) : type = ZetaIndicatorType.notification; /// The type of the [ZetaIndicator] - icon or notification. + /// + /// Defaults to [ZetaIndicatorType.notification]. final ZetaIndicatorType type; /// The size of the [ZetaIndicator]. Default is [ZetaWidgetSize.large] final ZetaWidgetSize size; /// Inverse the border color. + /// + /// Defaults to false. final bool inverse; /// Indicator icon, default: `ZetaIcons.star_round`. diff --git a/lib/src/components/navigation bar/navigation_bar.dart b/lib/src/components/navigation bar/navigation_bar.dart index e0fb05cc..c865e2ed 100644 --- a/lib/src/components/navigation bar/navigation_bar.dart +++ b/lib/src/components/navigation bar/navigation_bar.dart @@ -3,14 +3,15 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; -/// An item to be used in a [ZetaNavigationBar] +const double _navigationItemBorderWidth = 1; + +/// An item to be used in a [ZetaNavigationBar]. class ZetaNavigationBarItem { /// Creates a new [ZetaNavigationBarItem] const ZetaNavigationBarItem({ required this.icon, required this.label, - this.showBadge = false, - this.badgeValue, + this.badge, }); /// The icon shown on the item. @@ -19,11 +20,8 @@ class ZetaNavigationBarItem { /// The label shown on the item. final String? label; - /// Displays a small [ZetaIndicator] on the item. - final bool showBadge; - - /// Displays a medium [ZetaIndicator] on the item with the given value. - final int? badgeValue; + /// [ZetaIndicator] badge to show on navigation item. + final ZetaIndicator? badge; } /// Navigation Bars (Bottom navigation) allow movement between primary destinations in an app. @@ -123,7 +121,7 @@ class ZetaNavigationBar extends StatelessWidget { Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - late Widget child; + final Widget child; if (splitItems || dividerIndex != null) { final List leftItems = []; @@ -144,8 +142,8 @@ class ZetaNavigationBar extends StatelessWidget { if (dividerIndex != null) Container( color: colors.borderSubtle, - width: 1, - height: 44, + width: _navigationItemBorderWidth, + height: ZetaSpacing.x11, ), _generateNavigationItemRow(rightItems), ], @@ -169,12 +167,7 @@ class ZetaNavigationBar extends StatelessWidget { ), decoration: BoxDecoration( color: colors.surfacePrimary, - border: Border( - top: BorderSide( - color: colors.borderSubtle, - width: 2, - ), - ), + border: Border(top: BorderSide(color: colors.borderSubtle)), ), child: child, ); @@ -203,22 +196,21 @@ class _NavigationItem extends StatelessWidget { final ZetaNavigationBarItem item; final VoidCallback onTap; - Widget _getBadge(BuildContext context) { - final colors = Zeta.of(context).colors; - final size = item.badgeValue == null && item.showBadge ? ZetaWidgetSize.small : ZetaWidgetSize.medium; - + Widget _getBadge(ZetaColors colors) { return Positioned( - right: -2, - top: -2, - child: Container( - padding: const EdgeInsets.all(0.25), + right: ZetaSpacing.xxs, + child: DecoratedBox( decoration: BoxDecoration( color: colors.surfacePrimary, borderRadius: ZetaRadius.full, ), - child: ZetaIndicator.notification( - size: size, - value: item.badgeValue, + child: item.badge?.copyWith( + size: item.badge?.value == null + ? ZetaWidgetSize.small + : item.badge?.size == ZetaWidgetSize.large + ? ZetaWidgetSize.medium + : null, + type: ZetaIndicatorType.notification, ), ), ); @@ -227,33 +219,34 @@ class _NavigationItem extends StatelessWidget { @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - final elementColor = selected ? colors.primary : colors.textDisabled; return Material( color: colors.surfacePrimary, - borderRadius: ZetaRadius.wide, child: InkWell( - borderRadius: ZetaRadius.wide, + borderRadius: ZetaRadius.rounded, onTap: onTap, child: Container( - padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.x4, - vertical: ZetaSpacing.x2, - ), + padding: const EdgeInsets.only(left: ZetaSpacing.xs, right: ZetaSpacing.xs, bottom: ZetaSpacing.xs), child: Column( mainAxisSize: MainAxisSize.min, children: [ - Stack( - children: [ - Icon( - item.icon, - color: elementColor, - ), - if (item.showBadge || item.badgeValue != null) _getBadge(context), - ], + SizedBox( + width: ZetaSpacing.x11, + height: ZetaSpacing.x8 - _navigationItemBorderWidth, + child: Stack( + children: [ + Positioned( + left: ZetaSpacing.x2_5, + top: ZetaSpacing.xs - _navigationItemBorderWidth, + right: ZetaSpacing.x2_5, + child: Icon(item.icon, color: elementColor, size: ZetaSpacing.x6), + ), + if (item.badge != null) _getBadge(colors), + ], + ), ), - const SizedBox(height: ZetaSpacing.x2), + const SizedBox(height: ZetaSpacing.xs), if (item.label != null) Text( item.label!,