Bottom navigation bar (#76)

* Boilerplate for bottom navigation bar * Add bottom navigation bar item * Boilerplate for bottom navigation bar * Add bottom navigation bar item * Complete implementation * Commit from GitHub Actions (Forui Presubmit) * Update changelog * Commit from GitHub Actions (Forui Samples Presubmit) * Fix pr issues
forus-labs · Jul 16, 2024 · 28b895b · 28b895b
1 parent 5dee341
commit 28b895b
Show file tree

Hide file tree

Showing 19 changed files with 806 additions and 92 deletions.
diff --git a/docs/pages/docs/bottom-navigation-bar.mdx b/docs/pages/docs/bottom-navigation-bar.mdx
@@ -0,0 +1,77 @@
+import {Callout} from "nextra/components";
+import { Tabs } from 'nextra/components';
+import { Widget } from "../../components/widget";
+
+# Bottom Navigation Bar
+
+A bottom navigation bar is usually present at the bottom of root pages.
+It is used to navigate between a small number of views, typically between three and five.
+
+<Tabs items={['Preview', 'Code']}>
+    <Tabs.Tab>
+        <Widget name='bottom-navigation-bar' query={{}}/>
+    </Tabs.Tab>
+    <Tabs.Tab>
+      ```dart
+      class Application extends StatefulWidget {
+        const Application({super.key});
+
+        @override
+        State<Application> createState() => _ApplicationState();
+      }
+
+      class _ApplicationState extends State<Application> {
+        int index = 1;
+
+        @override
+        Widget build(BuildContext context) => FBottomNavigationBar(
+              index: index,
+              onChange: (index) => setState(() => this.index = index),
+              items: [
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.home,
+                  label: 'Home',
+                ),
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.layoutGrid,
+                  label: 'Browse',
+                ),
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.radio,
+                  label: 'Radio',
+                ),
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.libraryBig,
+                  label: 'Library',
+                ),
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.search,
+                  label: 'Search',
+                ),
+              ],
+            );
+      }
+      ```
+    </Tabs.Tab>
+</Tabs>
+
+## Usage
+
+<Callout type="info">
+    A bottom navigation bar is typically used with `FScaffold`. A working example can be found [here](/docs/scaffold).
+</Callout>
+
+### `FBottomNavigationBar(...)`
+
+```dart
+FBottomNavigationBar(
+    index: 0,
+    onChange: (index) => {},
+    items: [
+      FBottomNavigationBarItem(
+        icon: FAssets.icons.home,
+        label: 'Home',
+      ),
+    ],
+  )
+```
diff --git a/docs/pages/docs/header.mdx b/docs/pages/docs/header.mdx
@@ -1,4 +1,4 @@
-import { Tabs } from 'nextra/components';
+import {Callout, Tabs} from 'nextra/components';
 import { Widget } from "../../components/widget";
 
 # Header
@@ -60,6 +60,10 @@ It is typically used on nested pages or sheets.
 
 ## Usage
 
+<Callout type="info">
+    A header is typically used with `FScaffold`. A working example can be found [here](/docs/scaffold).
+</Callout>
+
 ### `FHeader(...)`
 
 ```dart

diff --git a/docs/pages/docs/scaffold.mdx b/docs/pages/docs/scaffold.mdx
@@ -10,8 +10,11 @@ Creates a visual scaffold for Forui widgets.
   </Tabs.Tab>
   <Tabs.Tab>
     ```dart
-    FScaffold(
-      header: FHeader(
+    final headers = [
+      const FHeader(title: Text('Home')),
+      const FHeader(title: Text('Categories')),
+      const FHeader(title: Text('Search')),
+      FHeader(
         title: const Text('Settings'),
         actions: [
           FHeaderAction(
@@ -20,8 +23,24 @@ Creates a visual scaffold for Forui widgets.
           ),
         ],
       ),
-      content: ListView(
+    ];
+
+    final contents = [
+      const Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [Text('Home Placeholder')],
+      ),
+      const Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [Text('Categories Placeholder')],
+      ),
+      const Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [Text('Search Placeholder')],
+      ),
+      Column(
         children: [
+          const SizedBox(height: 5),
           FCard(
             title: const Text('Account'),
             subtitle: const Text('Make changes to your account here. Click save when you are done.'),
@@ -46,7 +65,46 @@ Creates a visual scaffold for Forui widgets.
           ),
         ],
       ),
-    );
+    ];
+
+    class _Application extends StatefulWidget {
+      const _Application({super.key});
+
+      @override
+      State<_Application> createState() => _ApplicationState();
+    }
+
+    class _ApplicationState extends State<_Application> {
+      int index = 3;
+
+      @override
+      Widget build(BuildContext context) => FScaffold(
+            header: headers[index],
+            content: contents[index],
+            footer: FBottomNavigationBar(
+              index: index,
+              onChange: (index) => setState(() => this.index = index),
+              items: [
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.home,
+                  label: 'Home',
+                ),
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.layoutGrid,
+                  label: 'Categories',
+                ),
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.search,
+                  label: 'Search',
+                ),
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.settings,
+                  label: 'Settings',
+                ),
+              ],
+            ),
+          );
+    }
     ```
   </Tabs.Tab>
 </Tabs>
@@ -76,6 +134,6 @@ FScaffold(
       ),
     ],
   ),
-  footer: const Text('Created by Forus Labs'),
+  footer: FBottomNavigationBar(items: const []),
 );
 ```
diff --git a/forui/CHANGELOG.md b/forui/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### Additions
 * Add `FCalendar`
+* Add `FBottomNavigationBar`
 
 ### Enhancements
 * **Breaking** Change `FSwitch` to be usable in `Form`s.

diff --git a/forui/example/lib/main.dart b/forui/example/lib/main.dart
@@ -8,18 +8,23 @@ void main() {
   runApp(const Application());
 }
 
-/// The application widget.
-class Application extends StatelessWidget {
-  /// Creates an application widget.
+class Application extends StatefulWidget {
   const Application({super.key});
 
+  @override
+  State<Application> createState() => _ApplicationState();
+}
+
+class _ApplicationState extends State<Application> {
+  int index = 1;
+
   @override
   Widget build(BuildContext context) => MaterialApp(
         builder: (context, child) => FTheme(
           data: FThemes.zinc.light,
           child: FScaffold(
             header: FHeader(
-              title: const Text('Example Example Example Example'),
+              title: const Text('Example'),
               actions: [
                 FHeaderAction(
                   icon: FAssets.icons.plus,
@@ -28,6 +33,28 @@ class Application extends StatelessWidget {
               ],
             ),
             content: child ?? const SizedBox(),
+            footer: FBottomNavigationBar(
+              index: index,
+              onChange: (index) => setState(() => this.index = index),
+              items: [
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.home,
+                  label: 'Home',
+                ),
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.layoutGrid,
+                  label: 'Categories',
+                ),
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.search,
+                  label: 'Search',
+                ),
+                FBottomNavigationBarItem(
+                  icon: FAssets.icons.settings,
+                  label: 'Settings',
+                ),
+              ],
+            ),
           ),
         ),
         home: const Example(),

diff --git a/forui/lib/src/theme/theme_data.dart b/forui/lib/src/theme/theme_data.dart
@@ -28,6 +28,9 @@ final class FThemeData with Diagnosticable {
   /// The badge styles.
   final FBadgeStyles badgeStyles;
 
+  /// The bottom navigation bar style.
+  final FBottomNavigationBarStyle bottomNavigationBarStyle;
+
   /// The button styles.
   final FButtonStyles buttonStyles;
 
@@ -73,6 +76,7 @@ final class FThemeData with Diagnosticable {
   FThemeData({
     required this.colorScheme,
     required this.badgeStyles,
+    required this.bottomNavigationBarStyle,
     required this.buttonStyles,
     required this.calendarStyle,
     required this.cardStyle,
@@ -102,6 +106,7 @@ final class FThemeData with Diagnosticable {
       typography: typography,
       style: style,
       badgeStyles: FBadgeStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
+      bottomNavigationBarStyle: FBottomNavigationBarStyle.inherit(colorScheme: colorScheme, typography: typography),
       buttonStyles: FButtonStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
       calendarStyle: FCalendarStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
       cardStyle: FCardStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
@@ -139,6 +144,7 @@ final class FThemeData with Diagnosticable {
     FTypography? typography,
     FStyle? style,
     FBadgeStyles? badgeStyles,
+    FBottomNavigationBarStyle? bottomNavigationBarStyle,
     FButtonStyles? buttonStyles,
     FCalendarStyle? calendarStyle,
     FCardStyle? cardStyle,
@@ -157,6 +163,7 @@ final class FThemeData with Diagnosticable {
         typography: typography ?? this.typography,
         style: style ?? this.style,
         badgeStyles: badgeStyles ?? this.badgeStyles,
+        bottomNavigationBarStyle: bottomNavigationBarStyle ?? this.bottomNavigationBarStyle,
         buttonStyles: buttonStyles ?? this.buttonStyles,
         calendarStyle: calendarStyle ?? this.calendarStyle,
         cardStyle: cardStyle ?? this.cardStyle,
@@ -179,6 +186,7 @@ final class FThemeData with Diagnosticable {
       ..add(DiagnosticsProperty('typography', typography, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('style', style, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('badgeStyles', badgeStyles, level: DiagnosticLevel.debug))
+      ..add(DiagnosticsProperty('bottomNavigationBarStyle', bottomNavigationBarStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('buttonStyles', buttonStyles, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('calendarStyle', calendarStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('cardStyle', cardStyle, level: DiagnosticLevel.debug))
@@ -202,6 +210,7 @@ final class FThemeData with Diagnosticable {
           typography == other.typography &&
           style == other.style &&
           badgeStyles == other.badgeStyles &&
+          bottomNavigationBarStyle == other.bottomNavigationBarStyle &&
           buttonStyles == other.buttonStyles &&
           calendarStyle == other.calendarStyle &&
           cardStyle == other.cardStyle &&
@@ -221,6 +230,7 @@ final class FThemeData with Diagnosticable {
       typography.hashCode ^
       style.hashCode ^
       badgeStyles.hashCode ^
+      bottomNavigationBarStyle.hashCode ^
       buttonStyles.hashCode ^
       calendarStyle.hashCode ^
       cardStyle.hashCode ^