Значок Flutter BottomNavigationBar уменьшается при нажатии и возвращается к нормальному размеру при выпуске

Question

У меня стандартная нижняя навигация. Я уже скрываю заголовки элементов и использую тип: BottomNavigationBarType.fixed, чтобы предотвратить анимацию по умолчанию.

Я хочу: значки элементов BottomNavigationBar уменьшаются при нажатии и возвращаются к нормальному размеру анимированно. Может ли кто-нибудь помочь мне в этом?

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

Вы можете использовать

AnimatedContainer

для достижения этой цели. Оберните каждую иконку в одну и пусть иконка расширяется внутри них. если вы измените высоту анимированного контейнера, он будет анимирован.