haptome / dot_navigation_bar

A bottom navigation bar that you can customize with the options you need, without any limits. You can also customize the appearance of the navigation bar with simple smooth animations, providing a nice and clean UI/UX.
https://github.com/haptome/dot_navigation_bar
MIT License
45 stars 17 forks source link

How can I navigate another page with connect that navbar? #2

Closed farhansadikgalib closed 3 years ago

farhansadikgalib commented 3 years ago

How to connect nav bar with page.?

haptome commented 3 years ago

hello there, if you just follow this code you might find out.

 class Run extends StatefulWidget {
  @override
  _RunState createState() => _RunState();
}

class _RunState extends State<Run> with WidgetsBindingObserver {
  int _currentIndex;

  @override
  void initState() {
    super.initState();

_currentIndex = 0;
  }

  void changePage(int index) {
    setState(() {
  _currentIndex = index;
    });
  }
    // this tabs list contain all the page you want to render .
  final tabs = [
    Home(),
    ListProduct(),
    OrdersPage(),
    SetUP(),
    ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFf3f6fb),
      // extendBody: true,
      body: tabs[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        showSelectedLabels: true,
        showUnselectedLabels: true,
        onTap: changePage, // new
        currentIndex: _currentIndex, // new
        selectedItemColor: ColorConstant.shemsuTextBodyColor,
        unselectedItemColor: Colors.grey[400],
        items: [
          // BottomNavigationBarItem(),
          // BottomNavigationBarItem(),
          // BottomNavigationBarItem(),
          //BottomNavigationBarItem(),
        ],
      ),
    );
  }
}

let me know if there is anything I can do to help.