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?