feat: Navigation bar (#32)

example/lib/home.dart

@@ -9,6 +9,7 @@ import 'package:zeta_example/pages/components/button_example.dart';
 import 'package:zeta_example/pages/components/checkbox_example.dart';
 import 'package:zeta_example/pages/components/chip_example.dart';
 import 'package:zeta_example/pages/components/dialpad_example.dart';
+import 'package:zeta_example/pages/components/navigation_bar_example.dart';
 import 'package:zeta_example/pages/theme/color_example.dart';
 import 'package:zeta_example/pages/components/password_input_example.dart';
 import 'package:zeta_example/pages/components/progress_example.dart';
@@ -33,6 +34,7 @@ final List<Component> components = [
   Component(ButtonExample.name, (context) => const ButtonExample()),
   Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
   Component(ChipExample.name, (context) => const ChipExample()),
+  Component(NavigationBarExample.name, (context) => const NavigationBarExample()),
   Component(PasswordInputExample.name, (context) => const PasswordInputExample()),
   Component(ProgressExample.name, (context) => const ProgressExample()),
   Component(DialPadExample.name, (context) => const DialPadExample()),

example/lib/pages/components/navigation_bar_example.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class NavigationBarExample extends StatefulWidget {
+  static const String name = 'NavigationBar';
+
+  const NavigationBarExample({super.key});
+
+  @override
+  State<NavigationBarExample> createState() => _NavigationBarExampleState();
+}
+
+class _NavigationBarExampleState extends State<NavigationBarExample> {
+  int selectedIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    final items = [
+      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'),
+    ];
+
+    return ExampleScaffold(
+      name: 'Navigation Bar',
+      child: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            ZetaNavigationBar.divided(items: items, dividerIndex: 3),
+            const SizedBox(height: 16),
+            ZetaNavigationBar.split(items: items),
+            const SizedBox(height: 16),
+            ZetaNavigationBar.action(
+              items: items,
+              action: ZetaButton.primary(
+                label: 'Button',
+                onPressed: () {},
+              ),
+            ),
+          ],
+        ),
+      ),
+      bottomNavigationBar: ZetaNavigationBar(
+        items: items,
+        currentIndex: selectedIndex,
+        onTap: (val) => setState(() {
+          selectedIndex = val;
+        }),
+      ),
+    );
+  }
+}

example/lib/widgets.dart

@@ -66,12 +66,14 @@ class ExampleScaffold extends StatelessWidget {
   final Widget child;
   final List<Widget> actions;
   final Widget? floatingActionButton;
+  final Widget? bottomNavigationBar;
 
   const ExampleScaffold({
     required this.name,
     required this.child,
     this.actions = const [],
     this.floatingActionButton,
+    this.bottomNavigationBar,
     super.key,
   });
 
@@ -98,6 +100,7 @@ class ExampleScaffold extends StatelessWidget {
         ],
       ),
       backgroundColor: colors.surface,
+      bottomNavigationBar: bottomNavigationBar,
       body: SelectionArea(
         child: child,
       ),

example/widgetbook/pages/components/navigation_bar_widgetbook.dart

@@ -0,0 +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';
+
+Widget navigationBarUseCase(BuildContext context) {
+  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');
+  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,
+            ),
+          ),
+        ),
+      ],
+    );
+  });
+}

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),
+                ),
               ),
             ),
     );

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(),
+            WidgetbookUseCase(name: 'Navigation Bar', builder: (context) => navigationBarUseCase(context))
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),
         WidgetbookCategory(

example/windows/runner/flutter_window.cpp

@@ -31,6 +31,11 @@ bool FlutterWindow::OnCreate() {
     this->Show();
   });
 
+  // Flutter can complete the first frame before the "show window" callback is
+  // registered. The following call ensures a frame is pending to ensure the
+  // window is shown. It is a no-op if the first frame hasn't completed yet.
+  flutter_controller_->ForceRedraw();
+
   return true;
 }
 

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`.