How to avoid loading of middle page when swithcing by PageController.animateToPage in bottom bar?

Viewed 123

I have some problems with using PageController.animateToPage when I navigate through my bottom bar which I downloaded from https://pub.dev/packages/bottom_navy_bar. When I want to switch between first and third page in my bottom bar it loades moddle pages for some moment, but in other situations it works perfectly. I use PageView in order to show pages with pagecontroller including animations.

My PageView:

     body: SizedBox.expand(
      child: PageView(
        controller: _pageController,
        onPageChanged: (i) {
          setState(() {
            selectedPos = i;
            if (selectedPos == 0) {
              setState(() {
                _isActiveHome = true;
                _isActiveMiddle = false;
                _isActiveProfile = false;
              });
            } else if (selectedPos == 1) {
              setState(() {
                _isActiveMiddle = true;
                _isActiveHome = false;
                _isActiveProfile = false;
              });
            } else if (selectedPos == 2) {
              setState(() {
                _isActiveProfile = true;
                _isActiveHome = false;
                _isActiveMiddle = false;
              });
            }
          });
        },
        children: [
          AnimatedOpacity(
              opacity: _isActiveHome ? 1.0 : 0.0,
              duration: Duration(milliseconds: 500),
              child: HomePage()),
          AnimatedOpacity(
              opacity: _isActiveMiddle ? 1.0 : 0.0,
              duration: Duration(milliseconds: 500),
              child: FavoritesPage()),
          AnimatedOpacity(
              opacity: _isActiveProfile ? 1.0 : 0.0,
              duration: Duration(milliseconds: 500),
              child: ProfilePage())
        ],
      ),
    ),

There I include my 3 pages which will be used in bottom bar and give them fade-effect.

My bottomNavigationBar:

bottomNavigationBar: ClipRRect(
          clipBehavior: Clip.hardEdge,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(25), topRight: Radius.circular(25)),
          child: BottomNavyBar(
            selectedIndex: selectedPos,
            showElevation: true,
            itemCornerRadius: 15,
            curve: Curves.easeInBack,
            onItemSelected: (i) {
              setState(() => selectedPos = i);
              _pageController.animateToPage(i,
                  duration: Duration(milliseconds: 1500),
                  curve: Curves.fastLinearToSlowEaseIn);
            },
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            items: [
              BottomNavyBarItem(
                  inactiveColor: Colors.grey[700],
                  activeColor: Colors.blue,
                  textAlign: TextAlign.center,
                  icon: ImageIcon(
                    AssetImage('assets/images/home-run.png'),
                    size: 28,
                  ),
                  title: Text(
                    "Главная",
                    style: TextStyle(fontSize: 18),
                  )),
              BottomNavyBarItem(
                  inactiveColor: Colors.grey[700],
                  activeColor: Colors.purple,
                  textAlign: TextAlign.center,
                  icon: ImageIcon(
                    AssetImage('assets/images/main.png'),
                    size: 23,
                  ),
                  title: Text(
                    "Избранное",
                    style: TextStyle(fontSize: 15),
                  )),
              BottomNavyBarItem(
                  inactiveColor: Colors.grey[700],
                  activeColor: Colors.red,
                  textAlign: TextAlign.center,
                  icon: ImageIcon(
                    AssetImage('assets/images/user.png'),
                    size: 27,
                  ),
                  title: Text(
                    "Профиль",
                    style: TextStyle(fontSize: 18),
                  ))
            ],
          ),

There I have my bottomNavyBar where I place _pageController and animation.

So, my question is How can I avoid loading of middle page in animateToPage ? Cause every tome when I want to switch between 1st and 3rd pages it loades for a little moment. Can someone help with this?

0 Answers
Related