A beautiful navigation bar with animation when select item.

Table of contents

1. Installing
2. How To Use
3. Showcase
4. Example Project
5. Contributors

🖥 Installing

Add Dependency

dependencies:
  stage_navigation_bar: ^0.0.1 #latest version

Import Package

import 'package:stage_navigation_bar/stage_navigation_bar.dart';

ℹ️ How To Use

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

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;
          });
        },
      ),
    );
  }
}

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.
• selectedIndex*: Current selected index.
• items*: StageNavigationBar items, must be >= 2.
• 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.

Default values

• itemEntering = StageNavigationEntering.top,
• alignment = Alignment.center,
• itemHeight = 60,
• indicatorHeight = 5,
• barWidth = double.infinity
• itemPadding = const EdgeInsets.all(0),
• duration = const Duration(milliseconds: 200),

StageNavigationEntering Values

StageNavigationEntering.top
StageNavigationEntering.center
StageNavigationEntering.bottom

Event

onTap: (index){

}

🕹 Showcase

StageNavigationEntering

itemEntering: StageNavigationEntering.top

---

itemEntering: StageNavigationEntering.center

---

itemEntering: StageNavigationEntering.bottom

📱 Example Project

Pub Example Project

Github Example Project

👨🏻‍💻 Contributors

Mohammad Alamoudi @mu7mmd