У меня есть нижняя панель навигации с некоторыми вкладками, и я хочу анимировать иконки из них при переключении страницы без внешнего пакета.
И у меня есть еще один вопрос, я добавил просмотр пейджера для переключения страниц считывание и тап по иконкам в навигационной панели, но получил ошибку. Например: я нахожусь в Страница 1, и я хочу переключиться на страница 3, пока он идет и проходит страница 2, он возвращается и остается в страница 2.
Метод _onPageChanged:
_onPageChanged(int index) {
setState(() {
_pageController.animateToPage(index,
duration: const Duration(milliseconds: 200), curve: Curves.easeInOut);
_activePage = index;
});
}
BottomNavBar (с нуля) и ViewPager:
bottomNavigationBar: BottomNavBar(
activeTab: _activePage,
onTabTap: _onPageChanged,
tabs: const [
BottomNavBarItem(
icon: Icon(Icons.icon_1, color: gray),
selectedIcon: Icon(Icons.icon_1_selected, color: white)
),
BottomNavBarItem(
icon: Icon(Icons.icon_2, color: gray),
selectedIcon: Icon(Icons.icon_2_selected, color: white)
),
BottomNavBarItem(
icon: Icon(Icons.icon_3, color: gray),
selectedIcon: Icon(Icons.icon_3_selected, color: white)
),
],
),
body: PageView(
controller: _pageController,
onPageChanged: _onPageChanged,
children: _pages,
),
Параметр значка BottomNavigationBarItem является виджетом, поэтому вы можете использовать любой виджет, который вам нужен, для того, что вы имеете в виду, это не связано с панелью навигации, а скорее с тем, что вы хотите анимировать.
Таким образом, это может быть так же просто, как значок, вращающийся после нажатия.
class AnimatedButtonThingy extends StatefulWidget {
const AnimatedButtonThingy({Key? key}) : super(key: key);
@override
_AnimatedButtonThingyState createState() => _AnimatedButtonThingyState();
}
class _AnimatedButtonThingyState extends State<AnimatedButtonThingy>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
bool shouldAnimate = false;
@override
void initState() {
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 2));
super.initState();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
shouldAnimate = !shouldAnimate;
shouldAnimate ? _controller.repeat() : _controller.stop();
});
},
child: Icon(Icons.auto_awesome));
}
}
Прочтите приведенный выше код как псевдокод, поскольку он не тестировался, но он даст вам представление о том, что можно сделать. Код анимации скопирован отсюда как-повернуть-изображение-используя-флаттер-анимационныйконтроллер-и-трансформировать