Update documentation to reference NavigationBar

README.md

@@ -21,50 +21,50 @@ Now in your Dart code, you can use:
 import 'package:cool_nav/cool_nav.dart';
 ```
 
-## List of Bottom Navigation Bars:
+## List of Navigation Bars:
 
-#### Spotlight Bottom Navigation Bar
+#### Spotlight Navigation Bar
 
-![Spotlight Bottom Navigation Bar](https://github.com/masterashu/flutter_cool_nav/blob/master/demo/spotlight_bottom_navigation_bar.gif?raw=true)  
+![Spotlight Navigation Bar](https://github.com/masterashu/flutter_cool_nav/blob/master/demo/spotlight_navigation_bar.gif?raw=true)  
 
 > Based on [design](https://www.behance.net/gallery/94842819/Animated-Tab-Bar) made by [Sanchita Agarwal](https://www.linkedin.com/in/sanchita-agrawal-829a5612b).
 
-An easy to use and customizable Bottom Navigation Bar. You can customize the
+An easy to use and customizable Navigation Bar. You can customize the
 colors as well provide a custom [Gradient](https://api.flutter.dev/flutter/dart-ui/Gradient-class.html) for the spotlight.
 
 **Usage**
 
 ```dart
 Scaffold(
     // ...
-    bottomNavigationBar: SpotlightBottomNavigationBar(
+    bottomNavigationBar: SpotlightNavigationBar(
         items: [
-          SpotlightBottomNavigationBarItem(icon: Icons.smartphone),
-          SpotlightBottomNavigationBarItem(icon: Icons.laptop_mac),
-          SpotlightBottomNavigationBarItem(icon: Icons.desktop_mac),
+          SpotlightNavigationBarItem(icon: Icons.smartphone),
+          SpotlightNavigationBarItem(icon: Icons.laptop_mac),
+          SpotlightNavigationBarItem(icon: Icons.desktop_mac),
         ],
-        currentIndex: currentIndex,
+        selectedIndex: selectedIndex,
         selectedItemColor: Colors.cyan,
         onTap: _onTap,
     ),
 )
 ```
 
-#### Flip Box Bottom Navigation Bar
+#### Flip Box Navigation Bar
 
-![Flip Box Bottom Navigation Bar](https://github.com/masterashu/flutter_cool_nav/blob/master/demo/flipbox_nav_bar.gif?raw=true)  
+![Flip Box Navigation Bar](https://github.com/masterashu/flutter_cool_nav/blob/master/demo/flipbox_navigation_bar.gif?raw=true)  
 
 > Based on [design](https://dribbble.com/shots/4811135-Tab-Bar-Cube-Interaction) made by [dannniel](https://dribbble.com/dannniel).
 
-An easy to use and customizable Bottom Navigation Bar. You can customize the selected and unselected `Icons` and background `Colors` for the tiles.
+An easy to use and customizable Navigation Bar. You can customize the selected and unselected `Icons` and background `Colors` for the tiles.
 
 **Usage**
 
 ```dart
 Scaffold(
     // ...
     bottomNavigationBar: FlipBoxNavigationBar(
-          currentIndex: currentIndex,
+          selectedIndex: selectedIndex,
           verticalPadding: 20.0,
           items: <FlipBoxNavigationBarItem>[
             FlipBoxNavigationBarItem(

example/.metadata

@@ -15,7 +15,7 @@ migration:
     - platform: root
       create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
       base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
-    - platform: linux
+    - platform: web
       create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
       base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
 

example/lib/flipbox_nav_bar.dart

@@ -10,18 +10,18 @@ class FlipBoxNavigationBarHome extends StatefulWidget {
 }
 
 class _FlipBoxNavigationBarHomeState extends State<FlipBoxNavigationBarHome> {
-  late int currentIndex;
+  late int selectedIndex;
 
-  _updateIndex(index) {
+  _updateSelectedIndex(index) {
     setState(() {
-      currentIndex = index;
+      selectedIndex = index;
     });
   }
 
   @override
   void initState() {
     super.initState();
-    currentIndex = 0;
+    selectedIndex = 0;
   }
 
   List<Text> texts = [
@@ -36,13 +36,13 @@ class _FlipBoxNavigationBarHomeState extends State<FlipBoxNavigationBarHome> {
   Widget build(BuildContext context) {
     return Scaffold(
         appBar: AppBar(
-          title: Text('Example'),
+          title: Text('Flipbox'),
         ),
         body: Center(
-          child: texts[currentIndex],
+          child: texts[selectedIndex],
         ),
         bottomNavigationBar: FlipBoxNavigationBar(
-          currentIndex: currentIndex,
+          selectedIndex: selectedIndex,
           verticalPadding: 20.0,
           items: <FlipBoxNavigationBarItem>[
             FlipBoxNavigationBarItem(
@@ -81,7 +81,7 @@ class _FlipBoxNavigationBarHomeState extends State<FlipBoxNavigationBarHome> {
               unselectedBackgroundColor: Colors.orangeAccent[100]!,
             ),
           ],
-          onTap: _updateIndex,
+          onDestinationSelected: _updateSelectedIndex,
         ));
   }
 }

example/lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:example/spotlight_nav_bar.dart';
 import 'package:flutter/material.dart';
 import 'flipbox_nav_bar.dart';
 
@@ -11,8 +12,16 @@ class MyApp extends StatelessWidget {
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
-      // home: SpotlightNavigationBarHome(),
-      home: FlipBoxNavigationBarHome(),
+      home: Column(
+        children: [
+          Expanded(
+            child: SpotlightNavBarHome(),
+          ),
+          Expanded(
+            child: FlipBoxNavigationBarHome(),
+          ),
+        ],
+      ),
     );
   }
 }

example/lib/spotlight_nav_bar.dart

@@ -9,18 +9,18 @@ class SpotlightNavBarHome extends StatefulWidget {
 }
 
 class _SpotlightNavBarHomeState extends State<SpotlightNavBarHome> {
-  late int currentIndex;
+  late int selectedIndex;
 
-  _updateIndex(index) {
+  _updateSelectedIndex(index) {
     setState(() {
-      currentIndex = index;
+      selectedIndex = index;
     });
   }
 
   @override
   void initState() {
     super.initState();
-    currentIndex = 0;
+    selectedIndex = 0;
   }
 
   List<Text> texts = [
@@ -34,30 +34,20 @@ class _SpotlightNavBarHomeState extends State<SpotlightNavBarHome> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: Text("Example"),
+        title: Text("Spotlight"),
       ),
       body: Center(
-        child: texts[currentIndex],
+        child: texts[selectedIndex],
       ),
-      bottomNavigationBar: SpotlightBottomNavigationBar(
+      bottomNavigationBar: SpotlightNavigationBar(
         items: [
-          SpotlightBottomNavigationBarItem(icon: Icons.smartphone),
-          SpotlightBottomNavigationBarItem(icon: Icons.web),
-          SpotlightBottomNavigationBarItem(icon: Icons.laptop_mac),
-          SpotlightBottomNavigationBarItem(icon: Icons.desktop_mac),
+          SpotlightNavigationBarItem(icon: Icons.smartphone),
+          SpotlightNavigationBarItem(icon: Icons.laptop_mac),
+          SpotlightNavigationBarItem(icon: Icons.desktop_mac),
         ],
-        currentIndex: currentIndex,
-        onTap: _updateIndex,
-        backgroundColor: Colors.white,
-        selectedItemColor: Colors.purple,
-        spotlightGradient: RadialGradient(colors: [
-          Colors.indigo,
-          Colors.blue.withAlpha(200),
-          Colors.green.withAlpha(150),
-          Colors.yellow.withAlpha(100),
-          Colors.orange.withAlpha(50),
-          Colors.red.withAlpha(0),
-        ], center: Alignment.topCenter),
+        selectedIndex: selectedIndex,
+        selectedItemColor: Colors.cyan,
+        onDestinationSelected: _updateSelectedIndex,
       ),
     );
   }

example/pubspec.lock

@@ -47,7 +47,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.1.0"
+    version: "0.1.1"
   cupertino_icons:
     dependency: "direct main"
     description:

example/web/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="example">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>example</title>
+  <link rel="manifest" href="manifest.json">
+
+  <script>
+    // The value below is injected by flutter build, do not touch.
+    const serviceWorkerVersion = null;
+  </script>
+  <!-- This script adds the flutter initialization JS code -->
+  <script src="flutter.js" defer></script>
+</head>
+<body>
+  <script>
+    window.addEventListener('load', function(ev) {
+      // Download main.dart.js
+      _flutter.loader.loadEntrypoint({
+        serviceWorker: {
+          serviceWorkerVersion: serviceWorkerVersion,
+        },
+        onEntrypointLoaded: function(engineInitializer) {
+          engineInitializer.initializeEngine().then(function(appRunner) {
+            appRunner.runApp();
+          });
+        }
+      });
+    });
+  </script>
+</body>
+</html>

example/web/manifest.json

@@ -0,0 +1,35 @@
+{
+    "name": "example",
+    "short_name": "example",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A new Flutter project.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}