Flutter BottomNavigationBar 图标在点击时缩小并在释放时返回正常大小

Question

I have standard Bottom Navigation. I already hide item titles and use type: BottomNavigationBarType.fixed to prevent default animation.

What I want is: BottomNavigationBar item icons got smaller on click and return back to normal size animatedly. Could anybody help me achieving this?

 int _selectedIndex = 0; static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold); static const List<Widget> _widgetOptions = <Widget>[ Text( 'Index 0: Home', style: optionStyle, ), Text( 'Index 1: Business', style: optionStyle, ), Text( 'Index 2: School', style: optionStyle, ), ]; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('BottomNavigationBar Sample'), ), body: Center( child: _widgetOptions.elementAt(_selectedIndex), ), bottomNavigationBar: BottomNavigationBar( items: const <BottomNavigationBarItem>[ BottomNavigationBarItem( icon: Icon(Icons.home), title: SizedBox.shrink(), ), BottomNavigationBarItem( icon: Icon(Icons.business), title: SizedBox.shrink(), ), BottomNavigationBarItem( icon: Icon(Icons.school), title: SizedBox.shrink(), ), ], currentIndex: _selectedIndex, selectedItemColor: Colors.amber[800], onTap: _onItemTapped, type: BottomNavigationBarType.fixed, ), ); }

Answer 1

You can use a

AnimatedContainer

to achieve this. Wrap every of your Icons in one and have the icon expand within them. if you change the height of the Animated Container, it will be animated.