Skip to content

Commit

Permalink
Fix spacing, change badge logic, update widgetbook and example
Browse files Browse the repository at this point in the history
  • Loading branch information
@thelukewalton
thelukewalton committed Mar 4, 2024
1 parent 88f70c9 commit 455b94e
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 159 deletions.
17 changes: 1 addition & 16 deletions example/lib/pages/components/navigation_bar_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,7 @@ class _NavigationBarExampleState extends State<NavigationBarExample> {
@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'),
Expand Down Expand Up @@ -55,16 +50,6 @@ class _NavigationBarExampleState extends State<NavigationBarExample> {
selectedIndex = val;
}),
),
// bottomNavigationBar: BottomNavigationBar(items: [
// BottomNavigationBarItem(
// icon: Icon(ZetaIcons.star_round),
// label: 'Label',
// ),
// BottomNavigationBarItem(
// icon: Icon(ZetaIcons.star_round),
// label: 'Label',
// )
// ]),
);
}
}
122 changes: 31 additions & 91 deletions example/widgetbook/pages/components/navigation_bar_widgetbook.dart
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,39 @@
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) {
return StatefulBuilder(builder: (context, setState) {
List<ZetaNavigationBarItem> 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');

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,
),
);
},
),
],
);
),
),
],
);
});
}
14 changes: 8 additions & 6 deletions example/widgetbook/test/test_components.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
),
),
),
);
Expand Down
2 changes: 1 addition & 1 deletion example/widgetbook/widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
6 changes: 5 additions & 1 deletion lib/src/components/badges/indicator.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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`.
Expand Down
81 changes: 37 additions & 44 deletions lib/src/components/navigation bar/navigation_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand Down Expand Up @@ -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<ZetaNavigationBarItem> leftItems = [];
Expand All @@ -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),
],
Expand All @@ -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,
);
Expand Down Expand Up @@ -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,
),
),
);
Expand All @@ -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!,
Expand Down

0 comments on commit 455b94e

Please sign in to comment.