Description:

stage navigation bar

A beautiful navigation bar with animation when select item.

Table of contents #

Installing
How To Use
Showcase
Example Project
Contributors

🖥 Installing #
Add Dependency #
dependencies:
stage_navigation_bar: ^0.1.0 #latest version
copied to clipboard
Import Package #
import 'package:stage_navigation_bar/stage_navigation_bar.dart';
copied to clipboard
ℹ️ How To Use #
Place your StageNavigationBar to the bottomNavigationBar slot of a Scaffold. Or in the bottom
of your main page view.
Code #
class StageNavigationBarExample extends StatefulWidget {
const StageNavigationBarExample({super.key});

@override
State<StageNavigationBarExample> createState() =>
_StageNavigationBarExampleState();
}

class _StageNavigationBarExampleState extends State<StageNavigationBarExample> {
/// Your initial page
int _selectedIndex = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: StageNavigationBar(
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),
],
selectedIndex: _selectedIndex,
indicatorColor: Colors.amber,
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},
),
);
}
}
copied to clipboard
Properties #

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.
indicatorColor*: Color of the indicator and the gradient.
onTap*: On item tap.
barPadding?: StageNavigationBar internal padding.
barMargin?: StageNavigationBar external padding.
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 #

animationDirection = IndicatorAnimationDirection.topToBottom,
alignment = Alignment.center,
barHeight = 60,
barWidth = double.infinity
indicatorHeight = 5,
itemPadding = const EdgeInsets.all(0),
duration = const Duration(milliseconds: 200),
selectedIndicatorBorderRadius: default value depends on 'animationDirection' value,
unselectedIndicatorBorderRadius: default value depends on 'animationDirection' value,

IndicatorAnimationDirection Values #
IndicatorAnimationDirection.top
IndicatorAnimationDirection.topToBottom
IndicatorAnimationDirection.centerToTop
IndicatorAnimationDirection.centerToBottom
IndicatorAnimationDirection.bottom
IndicatorAnimationDirection.bottomToTop
copied to clipboard
Event #
onTap: (index){

}
copied to clipboard
🕹 Showcase #
IndicatorAnimationDirection #
animationDirection: IndicatorAnimationDirection.top
copied to clipboard


animationDirection: IndicatorAnimationDirection.topToBottom
copied to clipboard


animationDirection: IndicatorAnimationDirection.centerToTop
copied to clipboard


animationDirection: IndicatorAnimationDirection.centerToBottom
copied to clipboard


animationDirection: IndicatorAnimationDirection.bottom
copied to clipboard


animationDirection: IndicatorAnimationDirection.bottomToTop
copied to clipboard

📱 Example Project #
Pub Example
Github Example Project
👨🏻‍💻 Contributors #
Mohammad Alamoudi @mu7mmd

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter