flutterflutter-layoutflutter-animationpageviewsbottom-navigation-bar

Flutter BottomNavigationBar Animation not functioning


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

Solution

  • 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