Merge branch 'develop'

CHANGELOG.md

@@ -22,4 +22,14 @@
 ## 0.0.1+5 - 26/06/2024
 
 - Add v0.0.1+4 changelog in CHANGELOG.md.
-- Update github badge color in README.md.
+- Update github badge color in README.md.
+
+## 0.1.0 - 27/06/2024
+
+- Add named constructor `StageNavigationBar.builder`.
+- Add more indicator animation transitions `IndicatorAnimationDirection`.
+- Accept `items` and `itemsCount` greater or equal to 0. 
+- Enhance some codes.
+- Enhances in code structure.
+- Update README.md.
+- Update example project.

README.md

@@ -11,13 +11,13 @@ and the Flutter guide for
 [developing packages and plugins](https://flutter.dev/developing-packages).
 -->
 
-![Static Badge](https://img.shields.io/badge/pub-v0.0.1-blue?logo=dart&link=https%3A%2F%2Fpub.dev%2Fpackages%2Fstage_navigation_bar)
+![Static Badge](https://img.shields.io/badge/pub-v0.1.0-blue?logo=dart&link=https%3A%2F%2Fpub.dev%2Fpackages%2Fstage_navigation_bar)
 ![Static Badge](https://img.shields.io/badge/github-mu7mmd-limegreen?logo=github&link=https%3A%2F%2Fgithub.com%2Fmu7mmd)
 ![Static Badge](https://img.shields.io/badge/linkedin-3mdy-blue?logo=linkedin&link=https%3A%2F%2Fwww.linkedin.com%2Fin%2F3mdy)
 
 A beautiful navigation bar with animation when select item.
 
-![Top Entering](https://raw.githubusercontent.com/mu7mmd/stage_navigation_bar/main/doc/assets/top-entering-indicator.gif)
+![Top To Bottom](https://raw.githubusercontent.com/mu7mmd/stage_navigation_bar/main/doc/assets/top-to-bottom.gif)
 
 ## Table of contents
 
@@ -32,7 +32,7 @@ A beautiful navigation bar with animation when select item.
 ### Add Dependency
 ```yaml
 dependencies:
-  stage_navigation_bar: ^0.0.1 #latest version
+  stage_navigation_bar: ^0.1.0 #latest version
 ```
 
 ### Import Package
@@ -45,8 +45,6 @@ import 'package:stage_navigation_bar/stage_navigation_bar.dart';
 Place your `StageNavigationBar` to the `bottomNavigationBar` slot of a `Scaffold`. Or in the bottom
 of your main page view.
 
-**❗️ It works with 2 or more navigation items.**
-
 ### Code
 ```dart
 class StageNavigationBarExample extends StatefulWidget {
@@ -85,35 +83,44 @@ class _StageNavigationBarExampleState extends State<StageNavigationBarExample> {
 ```
 
 ### Properties
-- `itemEntering`: Define the animation move shape when tap.
-- `alignment`: Alignment of the item inside the shadow colors.
-- `itemHeight`: The height of each item.
-- `indicatorHeight`: Indicator height.
-- `indicatorColor`*: The color of the indicator and the shadow degrees.
+- `animationDirection`: Define the animation move shape when tap.
+- `alignment`: Alignment of the items.
+- `barHeight`: `StageNavigationBar` height.
+- `barWidth`: `StageNavigationBar` width.
+- `indicatorHeight`: Indicator line height.
+- `itemPadding`: Each item padding.
+- `duration`: Indicator animation Transition duration.
 - `selectedIndex`*: Current selected index.
-- `items`*: `StageNavigationBar` items, must be >= 2.
+- `indicatorColor`*: Color of the indicator and the gradient.
 - `onTap`*: On item tap.
-- `barWidth`: `StageNavigationBar` width.
-- `itemPadding`: The padding of each item.
 - `barPadding`?: `StageNavigationBar` internal padding.
 - `barMargin`?: `StageNavigationBar` external padding.
-- `duration`: The transition duration.
 - `decoration`?: `StageNavigationBar` box decoration.
+- `selectedIndicatorBorderRadius`?: Selected item indicator border radius.
+- `unselectedIndicatorBorderRadius`?: Unselected item indicator border radius.
+- `items`!: `StageNavigationBar` items, List of widget.
+- `itemsCount`!: Items count for `itemBuilder` callback.
+- `itemBuilder`!: Callback will be called with indices greater than or equal to zero and less than `itemsCount`.
 
 ### Default values
-- `itemEntering = StageNavigationEntering.top`,
+- `animationDirection = IndicatorAnimationDirection.topToBottom`,
 - `alignment = Alignment.center`,
-- `itemHeight = 60`,
-- `indicatorHeight = 5`,
+- `barHeight = 60`,
 - `barWidth = double.infinity`
+- `indicatorHeight = 5`,
 - `itemPadding = const EdgeInsets.all(0)`,
 - `duration = const Duration(milliseconds: 200)`,
+- `selectedIndicatorBorderRadius: default value depends on 'itemEntering' value`,
+- `unselectedIndicatorBorderRadius: default value depends on 'itemEntering' value`,
 
-### StageNavigationEntering Values
+### IndicatorAnimationDirection Values
 ```dart
-StageNavigationEntering.top
-StageNavigationEntering.center
-StageNavigationEntering.bottom
+IndicatorAnimationDirection.top
+IndicatorAnimationDirection.topToBottom
+IndicatorAnimationDirection.centerToTop
+IndicatorAnimationDirection.centerToBottom
+IndicatorAnimationDirection.bottom
+IndicatorAnimationDirection.bottomToTop
 ```
 
 ### Event
@@ -125,28 +132,47 @@ onTap: (index){
 
 ## 🕹 Showcase <a name="showcase"></a>
 
-### `StageNavigationEntering`
+### `IndicatorAnimationDirection`
+
+```dart
+animationDirection: IndicatorAnimationDirection.top
+```
+![Top](https://raw.githubusercontent.com/mu7mmd/stage_navigation_bar/main/doc/assets/top.gif)
+
+---
+```dart
+animationDirection: IndicatorAnimationDirection.topToBottom
+```
+![Top To Bottom](https://raw.githubusercontent.com/mu7mmd/stage_navigation_bar/main/doc/assets/top-to-bottom.gif)
 
+---
 ```dart
-itemEntering: StageNavigationEntering.top
+animationDirection: IndicatorAnimationDirection.centerToTop
 ```
-![Top Entering](https://raw.githubusercontent.com/mu7mmd/stage_navigation_bar/main/doc/assets/top-entering-indicator.gif)
+![Center To Top](https://raw.githubusercontent.com/mu7mmd/stage_navigation_bar/main/doc/assets/center-to-top.gif)
 
 ---
 ```dart
-itemEntering: StageNavigationEntering.center
+animationDirection: IndicatorAnimationDirection.centerToBottom
 ```
-![Center Entering](https://raw.githubusercontent.com/mu7mmd/stage_navigation_bar/main/doc/assets/center-entering-indicator.gif)
+![Center To Bottom](https://raw.githubusercontent.com/mu7mmd/stage_navigation_bar/main/doc/assets/center-to-bottom.gif)
 
 ---
 ```dart
-itemEntering: StageNavigationEntering.bottom
+animationDirection: IndicatorAnimationDirection.bottom
 ```
-![Bottom Entering](https://raw.githubusercontent.com/mu7mmd/stage_navigation_bar/main/doc/assets/bottom-entering-indicator.gif)
+![Bottom](https://raw.githubusercontent.com/mu7mmd/stage_navigation_bar/main/doc/assets/bottom.gif)
+
+---
+```dart
+animationDirection: IndicatorAnimationDirection.bottomToTop
+```
+![Bottom To Top](https://raw.githubusercontent.com/mu7mmd/stage_navigation_bar/main/doc/assets/bottom-to-top.gif)
+
 
 ## 📱 Example Project <a name="example"></a>
 
-[Pub Example Project](https://pub.dev/packages/stage_navigation_bar/example)
+[Pub Example](https://pub.dev/packages/stage_navigation_bar/example)
 
 [Github Example Project](https://github.com/mu7mmd/stage_navigation_bar/tree/main/example)
 

example/lib/main.dart

@@ -36,6 +36,13 @@ class _StageNavigationBarExampleState extends State<StageNavigationBarExample> {
   /// Your initial page
   int _selectedIndex = 0;
 
+  final _icons = [
+    Icons.home_filled,
+    Icons.favorite,
+    Icons.search,
+    Icons.person
+  ];
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -54,6 +61,29 @@ class _StageNavigationBarExampleState extends State<StageNavigationBarExample> {
           Center(child: Text('Profile Page')),
         ],
       ),
+      // bottomNavigationBar: StageNavigationBar.builder(
+      //   barPadding: EdgeInsets.only(
+      //     bottom: MediaQuery.of(context).viewPadding.bottom,
+      //   ),
+      //   decoration: const BoxDecoration(
+      //     color: Colors.deepPurple,
+      //     border: Border(
+      //       top: BorderSide(color: Colors.purpleAccent),
+      //     ),
+      //   ),
+      //   itemsCount: 4,
+      //   itemBuilder: (context, index) => Icon(
+      //     _icons[index],
+      //     color: index == _selectedIndex ? Colors.amber : Colors.white,
+      //   ),
+      //   selectedIndex: _selectedIndex,
+      //   indicatorColor: Colors.amber,
+      //   onTap: (int index) {
+      //     setState(() {
+      //       _selectedIndex = index;
+      //     });
+      //   },
+      // ),
       bottomNavigationBar: StageNavigationBar(
         barPadding: EdgeInsets.only(
           bottom: MediaQuery.of(context).viewPadding.bottom,
@@ -64,13 +94,7 @@ class _StageNavigationBarExampleState extends State<StageNavigationBarExample> {
             top: BorderSide(color: Colors.purpleAccent),
           ),
         ),
-        // barMargin: MediaQuery.of(context).viewPadding,
-        items: const [
-          Icon(Icons.home_filled, color: Colors.white),
-          Icon(Icons.favorite, color: Colors.white),
-          Icon(Icons.search, color: Colors.white),
-          Icon(Icons.person, color: Colors.white),
-        ],
+        items: _icons.map((icon) => Icon(icon, color: Colors.white)).toList(),
         selectedIndex: _selectedIndex,
         indicatorColor: Colors.amber,
         onTap: (int index) {

lib/src/constants/dimensions.dart

@@ -0,0 +1,28 @@
+part of '../stage_navigation_bar.dart';
+
+const _animationDirection = IndicatorAnimationDirection.topToBottom;
+
+const Alignment _alignment = Alignment.center;
+
+const double _barHeight = 60;
+
+const double _barWidth = double.infinity;
+
+const double _indicatorHeight = 5;
+
+const EdgeInsets _itemPadding = EdgeInsets.all(0);
+
+const Duration _duration = Duration(milliseconds: 200);
+
+const double _radius = 10;
+
+const BorderRadius _indicatorRadius =
+    BorderRadius.all(Radius.circular(_radius));
+
+const BorderRadius _topIndicatorRadius = BorderRadius.vertical(
+  top: Radius.circular(_radius),
+);
+
+const BorderRadius _bottomIndicatorRadius = BorderRadius.vertical(
+  bottom: Radius.circular(_radius),
+);

lib/src/constants/enums.dart

@@ -1,3 +1,10 @@
 part of '../stage_navigation_bar.dart';
 
-enum StageNavigationEntering { top, center, bottom }
+enum IndicatorAnimationDirection {
+  top,
+  topToBottom,
+  centerToTop,
+  centerToBottom,
+  bottom,
+  bottomToTop
+}