Dev

CHANGELOG.md

@@ -72,4 +72,10 @@
 
 ### Added
 
--  added selected field to animate from outside of the package
+-  added selected field to animate from outside of the package
+
+## 0.1.0 - 2021-01-15
+
+### Fixed
+
+-  #23

README.md

@@ -12,35 +12,41 @@ Flutter modern bottom nav bar. Compatible with Android & iOS. You can customize
 
 ```yaml
 dependencies:
-  ss_bottom_navbar: 0.0.10
+  ss_bottom_navbar: 0.1.0
 ```
 
 ```bash
 $  flutter pub get
 ```
 
 ```dart
-import 'package:ss_bottom_navbar/ss_bottom_navbar.dart';
+import 'package:ss_bottom_navbar/src/ss_bottom_navbar.dart';
 ```
 
 ## Example
 
 ### SSBottomNav
 
 
-##### Usage
+#### Usage
+##### Create Items
 ```dart
-var items = [
+final items = [
   SSBottomNavItem(text: 'Home', iconData: Icons.home),
   SSBottomNavItem(text: 'Store', iconData: Icons.store),
   SSBottomNavItem(text: 'Add', iconData: Icons.add, isIconOnly: true),
   SSBottomNavItem(text: 'Explore', iconData: Icons.explore),
   SSBottomNavItem(text: 'Profile', iconData: Icons.person),
 ];
 ```
+##### Create the state
+```dart
+SSBottomBarState _state = SSBottomBarState();
+```
 ```dart
 SSBottomNav(
   items: items,
+  state: _state,
   color: Colors.black,
   selectedColor: Colors.white,
   unselectedColor: Colors.black,
@@ -56,6 +62,7 @@ SSBottomNav(
 ```dart
 SSBottomNav(
   items: items,
+  state: _state,
   color: Colors.black,
   selectedColor: Colors.white,
   unselectedColor: Colors.black,
@@ -70,6 +77,7 @@ SSBottomNav(
 |Name|  Type| Description|
 |--|--|--|
 | `items` |`List<SSBottomNavItem>`| list of `SSBottomNavItem` items |
+| `state` |`SSBottomBarState`| state of the bottome bar as `ChangeNotifier` |
 |`iconSize`| `double`| size of the icon on items |
 | `backgroundColor`| `Color` | background color of the widget|
 | `color`| `Color`| color of the slider |
@@ -132,4 +140,4 @@ Navigator.maybePop(context);
 
 ## Contributions
 
-Contributions of any kind are more than welcome! Feel free to fork and improve in any way you want, make a pull request, or open an issue.
+Contributions of any kind are more than welcome! Feel free to fork and improve in any way you want, make a pull request, or open an issue.

example/lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 import 'package:ss_bottom_navbar/ss_bottom_navbar.dart';
 
 void main() {
@@ -21,12 +22,11 @@ class App extends StatefulWidget {
 }
 
 class _AppState extends State<App> {
-  int _index = 0;
-  int _selected = 0;
+  SSBottomBarState _state;
   bool _isVisible = true;
 
-  var _colors = [Colors.red, Colors.blue, Colors.green, Colors.orange, Colors.teal];
-  var items = [
+  final _colors = [Colors.red, Colors.blue, Colors.green, Colors.orange, Colors.teal];
+  final items = [
     SSBottomNavItem(text: 'Home', iconData: Icons.home),
     SSBottomNavItem(text: 'Store', iconData: Icons.store),
     SSBottomNavItem(text: 'Add', iconData: Icons.add, isIconOnly: true),
@@ -35,65 +35,67 @@ class _AppState extends State<App> {
   ];
 
   @override
-  Widget build(BuildContext context) {
-    _page(Color color) => Container(color: color);
-
-    _buildPages() => _colors.map((color) => _page(color)).toList();
+  void initState() {
+    _state = SSBottomBarState();
+    super.initState();
+  }
 
-    _bottomSheet() => Container(
-          color: Colors.white,
-          child: Column(
-            children: [
-              ListTile(
-                leading: Icon(Icons.camera_alt),
-                title: Text('Use Camera'),
-              ),
-              ListTile(
-                leading: Icon(Icons.photo_library),
-                title: Text('Choose from Gallery'),
-              ),
-              ListTile(
-                leading: Icon(Icons.edit),
-                title: Text('Write a Story'),
-                onTap: () {
-                  Navigator.maybePop(context);
-                },
-              ),
-            ],
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+      create: (_) => _state,
+      builder: (context, child) {
+        context.watch<SSBottomBarState>();
+        return Scaffold(
+          body: IndexedStack(
+            index: _state.selected,
+            children: _buildPages(),
+          ),
+          floatingActionButton: FloatingActionButton(
+            child: Icon(_isVisible ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_up),
+            onPressed: () {
+              _state.setSelected(3);
+            },
+          ),
+          bottomNavigationBar: SSBottomNav(
+            items: items,
+            state: _state,
+            color: Colors.black,
+            selectedColor: Colors.white,
+            unselectedColor: Colors.black,
+            visible: _isVisible,
+            bottomSheetWidget: _bottomSheet(),
+            showBottomSheetAt: 2,
           ),
         );
-
-    return Scaffold(
-      body: IndexedStack(
-        index: _index,
-        children: _buildPages(),
-      ),
-      floatingActionButton: FloatingActionButton(
-        child: Icon(_isVisible ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_up),
-        onPressed: () {
-          setState(() {
-            // _isVisible = !_isVisible;
-            _selected = 3;
-          });
-        },
-      ),
-      bottomNavigationBar: SSBottomNav(
-        items: items,
-        color: Colors.black,
-        selectedColor: Colors.white,
-        unselectedColor: Colors.black,
-        visible: _isVisible,
-        bottomSheetWidget: _bottomSheet(),
-        showBottomSheetAt: 2,
-        selected: _selected,
-        onTabSelected: (index) {
-          print(index);
-          setState(() {
-            _index = index;
-            _selected = index;
-          });
-        },
-      ),
+      },
     );
   }
+
+  Widget _page(Color color) => Container(color: color);
+
+  List<Widget> _buildPages() => _colors.map((color) => _page(color)).toList();
+
+  Widget _bottomSheet() => Container(
+        color: Colors.white,
+        child: Column(
+          children: [
+            ListTile(
+              leading: Icon(Icons.camera_alt),
+              title: Text('Use Camera'),
+            ),
+            ListTile(
+              leading: Icon(Icons.photo_library),
+              title: Text('Choose from Gallery'),
+            ),
+            ListTile(
+              leading: Icon(Icons.edit),
+              title: Text('Write a Story'),
+              onTap: () {
+                Navigator.maybePop(context);
+              },
+            ),
+          ],
+        ),
+      );
 }

example/pubspec.lock

@@ -96,7 +96,7 @@ packages:
     source: hosted
     version: "1.8.0-nullsafety.3"
   provider:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: provider
       url: "https://pub.dartlang.org"
@@ -120,7 +120,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.10+2"
+    version: "0.1.0"
   stack_trace:
     dependency: transitive
     description:

example/pubspec.yaml

@@ -27,6 +27,7 @@ dependencies:
   ss_bottom_navbar:
     path: ../
 
+  provider:
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.

lib/helper/empty_item.dart → lib/src/helper/empty_item.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
-import 'package:ss_bottom_navbar/service.dart';
-import 'package:ss_bottom_navbar/ss_bottom_navbar.dart';
+import 'package:ss_bottom_navbar/src/service.dart';
+import 'package:ss_bottom_navbar/src/ss_bottom_navbar.dart';
 
 class EmptyItem extends StatefulWidget {
   final SSBottomNavItem ssBottomNavItem;
@@ -19,7 +19,7 @@ class EmptyItemState extends State<EmptyItem> {
 
   @override
   Widget build(BuildContext context) {
-    var service = Provider.of<Service>(context);
+    var service = Provider.of<SSBottomBarState>(context);
 
     var index = service.items.indexOf(widget.ssBottomNavItem);
     var selected = service.emptySelectedIndex == index;
@@ -72,4 +72,4 @@ class EmptyItemState extends State<EmptyItem> {
       ),
     );
   }
-}
+}

lib/service.dart → lib/src/service.dart

@@ -1,9 +1,11 @@
+library ss_bottom_navbar;
+
 import 'dart:async';
 
 import 'package:flutter/cupertino.dart';
-import 'package:ss_bottom_navbar/ss_bottom_navbar.dart';
+import 'package:ss_bottom_navbar/src/ss_bottom_navbar.dart';
 
-class Service extends ChangeNotifier {
+class SSBottomBarState extends ChangeNotifier {
   SSBottomNavBarSettings settings;
   List<SSBottomNavItem> items = [];
   List<Offset> sizes = [];
@@ -23,8 +25,8 @@ class Service extends ChangeNotifier {
   int clickedIndex = 0;
 
   get animationDuration => settings.duration ?? Duration(milliseconds: 300);
-  var state = SSBottomNavBarState.icon;
-  var emptySelectedIndex = 0;
+  SSBottomNavBarState state = SSBottomNavBarState.icon;
+  int emptySelectedIndex = 0;
 
   init(List<SSBottomNavItem> items, {SSBottomNavBarSettings settings}) {
     this.settings = settings;
@@ -48,6 +50,9 @@ class Service extends ChangeNotifier {
   }
 
   setSelected(int index, {bool didUpdateWidget = false}) async {
+    selected = index;
+    notifyListeners();
+
 //    TODO: FEATURE
 //    state = SSBottomNavBarState.icon;
 //    notifyListeners();
@@ -94,9 +99,7 @@ class SSBottomNavBarSettings {
   Color color;
   Color selectedColor;
   Color unselectedColor;
-  ValueChanged<int> onTabSelected;
   List<BoxShadow> shadow;
-  int selected;
   bool isWidthFixed;
   Duration duration;
   bool visible;
@@ -108,9 +111,7 @@ class SSBottomNavBarSettings {
       this.color,
       this.selectedColor,
       this.unselectedColor,
-      this.onTabSelected,
       this.shadow,
-      this.selected,
       this.isWidthFixed,
       this.visible,
       this.duration});