How can I make the bottom navbar to change pages by onSelected?

Question

I am using the bottom_navy_bar 5.3.2 for creating the bottom navigation bar, but the issue is when I have selected an icon it is not changing the pages.

import 'package:bottom_navy_bar/bottom_navy_bar.dart';

It works fine when I swipe left and right, but not on selection.

How can I achieve this?

Code:

body: SizedBox.expand(
        child: PageView(
          controller: _pageController,
          children: <Widget>[
            Home(),
            Center(child:Text("data")),
            Center(child:Text("data")),
            Center(child:Text("data")),
          ],
          onPageChanged: (int index){
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: _currentIndex,
        showElevation: true, // use this to remove appBar's elevation 
        onItemSelected: (index) {
          setState(() => _currentIndex = index);
          _pageController.jumpToPage(index);
        },
        items: [
          BottomNavyBarItem(
            icon: Icon(Icons.apps),
            title: Text('Challenges'),
            activeColor: Colors.red,
          ),
          BottomNavyBarItem(
              icon: Icon(Icons.people),
              title: Text('Users'),
              activeColor: Colors.purpleAccent
          ),
          BottomNavyBarItem(
              icon: Icon(Icons.message),
              title: Text('Messages'),
              activeColor: Colors.pink
          ),
          BottomNavyBarItem(
              icon: Icon(Icons.settings),
              title: Text('Settings'),
              activeColor: Colors.blue
          ),
        ],
      )

Answer 1

Your code is working fine. I think that you are not noticing the changes because your PageView's wigets are the same for every selected navigation bar item. Try this code bellow:

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(widget.title),), 
        body: SizedBox.expand(
          child: PageView(
            controller: _pageController,
            children: List.generate(4, (index) {
              return Container(child: Center(child:Text("data $index"),),
                color: Colors.primaries.elementAt(index),
              );
            }),
            onPageChanged: (int index) {
              setState(() => _currentIndex = index);
            },
          ),
        ),
        bottomNavigationBar: BottomNavyBar(
          selectedIndex: _currentIndex,
          showElevation: true, // use this to remove appBar's elevation
          onItemSelected: (index) {
            setState(() => _currentIndex = index);
            _pageController.jumpToPage(index);
          },
          items: [
            BottomNavyBarItem(
              icon: Icon(Icons.apps),
              title: Text('Challenges'),
              activeColor: Colors.red,
            ),
            BottomNavyBarItem(
                icon: Icon(Icons.people),
                title: Text('Users'),
                activeColor: Colors.purpleAccent
            ),
            BottomNavyBarItem(
                icon: Icon(Icons.message),
                title: Text('Messages'),
                activeColor: Colors.pink
            ),
            BottomNavyBarItem(
                icon: Icon(Icons.settings),
                title: Text('Settings'),
                activeColor: Colors.blue
            ),
          ],
        )
    );
  }
}

Note that I've just updated your code so that when a BottomNavyBarItem is selected it shows a Container with a different color in the PageView of your page.