BottomNavigationBar and PageView click to switch item issues #129738
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
- BottomNavigationBar
- BottomNavigationBarItem
- PageView
Expected results
During the animation transition period of clicking Home1 from Home4, Home2 and Home3 will not be automatically selected during this period
Actual results
In an interface with BottomNavigationBar and PageView WIidget, I use the animateToPage method of PageViewController to control the click switch interface effect of BottomNavigationBarItem at the bottom. From home4 to home1, during the 800 millisecond animation transition, the items of home2 and home3 will be instantly selected until the animation ends.
If click on home2 from home1, it's okay because these two items are close together, but if there are other items between the two switched items, the effect described above will appear.
There is a problem with only animateToPage , and using JumpToPage is fine, but I need to use animateToPage
Code sample
Code sample
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
int pageIndex = 0;
PageController pageController = PageController();
List<Widget> pageBody = const [
Center(child: Text('Page1')),
Center(child: Text('Page2')),
Center(child: Text('Page3')),
Center(child: Text('Page4')),
];
List<BottomNavigationBarItem> items = const [
BottomNavigationBarItem(
label: 'home1',
icon: Icon(Remix.cpu_line),
activeIcon: Icon(Remix.cpu_fill)),
BottomNavigationBarItem(
label: 'home2',
icon: Icon(Remix.alarm_line),
activeIcon: Icon(Remix.alarm_fill)),
BottomNavigationBarItem(
label: 'home3',
icon: Icon(Remix.game_line),
activeIcon: Icon(Remix.game_fill)),
BottomNavigationBarItem(
label: 'home4',
icon: Icon(Remix.oil_line),
activeIcon: Icon(Remix.oil_fill)),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('AppBar')),
body: PageView(
controller: pageController,
onPageChanged: (value) {
setState(() {
pageIndex = value;
});
},
children: pageBody,
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: pageIndex,
items: items,
onTap: (index) {
setState(() {
pageIndex = index;
pageController.animateToPage(index,
duration: const Duration(milliseconds: 800),
curve: Curves.ease);
});
},
),
);
}
}
Screenshots or Video
video6118549283907045977.mp4
Logs
Logs
This may not require a logFlutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.7.12, on Microsoft Windows [版本 10.0.19045.2965], locale zh-CN)
• Flutter version 3.7.12 on channel stable at D:\SDK\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4d9e56e694 (2 months ago), 2023-04-17 21:47:46 -0400
• Engine revision 1a65d409c7
• Dart version 2.19.6
• DevTools version 2.20.1
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn
[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at D:\SDK\android
• Platform android-34, build-tools 34.0.0
• Java binary at: D:\APP DATA\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
• All Android licenses accepted.
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[X] Visual Studio - develop for Windows
X Visual Studio not installed; this is necessary for Windows development.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2022.2)
• Android Studio at D:\APP DATA\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
[√] Connected device (3 available)
• LG V30 (mobile) • LGUS9985233338e • android-arm64 • Android 9 (API 28)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [版本 10.0.19045.2965]
• Edge (web) • edge • web-javascript • Microsoft Edge 114.0.1823.58
[√] HTTP Host Availability
• All required HTTP hosts are available