MouseRegion / AnimatedOpacity

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade800,
        body: Center(child: HoverBox()),
      ),
    );
  }
}

class HoverBox extends StatefulWidget {
  const HoverBox({super.key});

  @override
  State<HoverBox> createState() => _HoverBoxState();
}

class _HoverBoxState extends State<HoverBox> {
  bool _hovered = false;

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(border: Border.all()),
      child: Transform.translate(
        offset: Offset(100, 0),
        child: SizedBox.square(
          dimension: 200,
          child: MouseRegion(
            onEnter: (_) => setState(() => _hovered = true),
            onExit: (_) => setState(() => _hovered = false),
            child: ColoredBox(
              color: _hovered ? Colors.orange : Colors.blue.withAlpha(100),
            ),
          ),
        ),
      ),
    );
  }
}