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