widget book

ZebraDevs · Mar 1, 2024 · 88f70c9 · 88f70c9
1 parent 7cb0242
commit 88f70c9
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 2 deletions.
diff --git a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart 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
@@ -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
@@ -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),
         ],
       );