Scales icons for NavigationBar

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  int _selectedIndex = 0;
  late List<AnimationController> _controllers;
  late List<Animation<double>> _animations;

  @override
  void initState() {
    super.initState();
    _controllers = List.generate(4, (index) => AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 200),
    ));
    _animations = _controllers.map((controller) => Tween(begin: 1.0, end: 1.1).animate(controller)).toList();
  }

  @override
  void dispose() {
    for (var controller in _controllers) {
      controller.dispose();
    }
    super.dispose();
  }

  void _onItemTapped(int index) {
    setState(() {
      _controllers[_selectedIndex].reverse();
      _selectedIndex = index;
      _controllers[_selectedIndex].forward();
    });
  }

  Widget _buildPageContent() {
    switch (_selectedIndex) {
      case 0:
        return Text('Home Page');
      case 1:
        return Text('Search Page');
      case 2:
        return Text('Notifications Page');
      case 3:
        return Text('Profile Page');
      default:
        return Text('Page not found');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animated Navigation Bar')),
      body: Center(child: _buildPageContent()),
      bottomNavigationBar: NavigationBar(
        backgroundColor: Colors.transparent, 
        indicatorColor: Colors.transparent,
        shadowColor: Colors.transparent, 
        surfaceTintColor: Colors.transparent,
        elevation: 0, 
        selectedIndex: _selectedIndex,
        onDestinationSelected: _onItemTapped,
        destinations: <NavigationDestination>[
          NavigationDestination(icon: AnimatedIcon(index: 0, iconData: Icons.home), label: ''),
          NavigationDestination(icon: AnimatedIcon(index: 1, iconData: Icons.search), label: ''),
          NavigationDestination(icon: AnimatedIcon(index: 2, iconData: Icons.notifications), label: ''),
          NavigationDestination(icon: AnimatedIcon(index: 3, iconData: Icons.person), label: ''),
        ],
      ),
    );
  }
}

class AnimatedIcon extends StatelessWidget {
  final int index;
  final IconData iconData;

  AnimatedIcon({required this.index, required this.iconData});

  @override
  Widget build(BuildContext context) {
    final _MyHomePageState state = context.findAncestorStateOfType<_MyHomePageState>()!;
    return ScaleTransition(
      scale: state._animations[index],
      alignment: Alignment.center,
      child: Icon(
        iconData,
        size: 30,
        color: Colors.black,
      ),
    );
  }
}