Flutter BottomNavigationBar Animation not functioning

Question

My code works fine where I use PageView to navigate between 3 screens. These 3 screens can be swiped right (and back) and also there is a BottomNavigationBar, which also works just fine, and it is connected to the items in the PageView. But it seems like the animation in the BottomNavigationBar is not working, even though the screen/page does get updated. Any idea why? No error is shown.

   class MyHomeScreen extends StatefulWidget {
      @override
      State<MyHomeScreen> createState() => _MyHomeScreenState();
    }
    
    class _MyHomeScreenState extends State<MyHomeScreen> {
      bool value = true;
      int currentIndex = 0;
    
      PageController _pageController = PageController(
        initialPage: 0,
      );
    
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          body: Column(
            children: [
              Container(),
              Container(
                child: Expanded(
                  child: PageView(
                    controller: _pageController,
                    onPageChanged: (page) {
                      setState(() {
                        currentIndex = page;
                      });
                    },
                    children: [
                      SingleChildScrollView(
                        child: Column(
                          children: [
                            Container(),
                            ListView.builder(itemBuilder: (BuildContext context, int index) {},),
                          ],
                        ),
                      ),
                      Screen2(),
                      Screen3(),
                    ],
                  ),
                ),
              ),
            ],
          ),
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.shifting,
            backgroundColor: Colors.white,
            selectedItemColor: Colors.black54,
            unselectedItemColor: Colors.grey.withOpacity(0.5),
            showUnselectedLabels: true,
            showSelectedLabels: true,
            items: [
              BottomNavigationBarItem(),
              BottomNavigationBarItem(),
              BottomNavigationBarItem(),
            ],
            currentIndex: currentIndex,
            onTap: (value) {
              currentIndex = value;
              _pageController.animateToPage(
                value,
                duration: Duration(microseconds: 200),
                curve: Curves.linear,
              );
              setState((){});
            },
          ),
        );
      }
    }

Code updated but no difference in outcome.

 onTap: (value){
              _pageController.animateToPage(
                value,
                duration: Duration(microseconds: 200),
                curve: Curves.linear,
              );
            },

Answer 1

You are using small unit Duration(microseconds: 200),, hard to detect. Try likeduration: Duration(milliseconds: 200), to have some visual animation effect.

onTap: (value) {
  currentIndex = value;
  _pageController.animateToPage(
    value,
    duration: Duration(milliseconds: 200), //increase duration based on your need
    curve: Curves.linear,
  );
  setState(() {});
},
),

More about Duration

Answer 2

In the onTap callback you just have to animate to the new page because the PageView's onPageChanged callback will setState to the new index.

You dont have to do that inside of your onTap callback as it will immediately navigate to the new page and force the widget to rebuild so animation won't work.

So inside of onTap, just write this:

_pageController.animateToPage(
    value,
    duration: Duration(microseconds: 200),
    curve: Curves.linear,
);