Addds expanding functionality when hovering over the navigation rail

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: Scaffold(
        body: Row(
          children: const [
            ExtendingNavigationRail(),
            Expanded(child: Center(child: Text('Hi, mom!'))),
          ],
        ),
      ),
    );
  }
}

class ExtendingNavigationRail extends StatefulWidget {
  const ExtendingNavigationRail();

  @override
  State<ExtendingNavigationRail> createState() =>
      _ExtendingNavigationRailState();
}

class _ExtendingNavigationRailState<T extends NavigationRailDestination>
    extends State<ExtendingNavigationRail> with TickerProviderStateMixin {
  bool _extended = false;
  bool get extended => _extended;
  set extended(bool state) => setState(() => _extended = state);

  int? selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    const duration = Duration(milliseconds: 200);
    progress = AnimationController(
        vsync: this, duration: duration, reverseDuration: duration);
  }

  void _onEnter(PointerEnterEvent _) {
    extended = true;
    progress.forward();
  }

  void _onExit(PointerExitEvent _) {
    extended = false;
    progress.reverse();
  }

  late final AnimationController progress;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: _onEnter,
      onExit: _onExit,
      child: NavigationRail(
        backgroundColor: Colors.grey,
        destinations: const [
          NavigationRailDestination(
            icon: Icon(Icons.home_rounded),
            label: Text('Home'),
          ),
          NavigationRailDestination(
            icon: Icon(Icons.payment),
            label: Text('Budget'),
          ),
          NavigationRailDestination(
            icon: Icon(Icons.account_balance_rounded),
            label: Text('Accounts'),
          ),
        ],
        selectedIndex: selectedIndex,
        onDestinationSelected: (index) => setState(() => selectedIndex = index),
        extended: extended,
      ),
    );
  }
}