Flutter IconButton IconColor OnHover (not hoverColor) on Windows Desktop app

Question

I'm trying to change the color of the icon itself onHover instead of the splash(?)Circle thing around it,

IconButton(
onPressed: () {},
hoverColor:
Colors.green,
icon: const Icon(
Icons.edit)),

is there a way to do it, I'm new to flutter, but I have background in java/python.

Answer 1

To change the color of the Icon, you have to rely on a parameter, _isHovered for instance, which will be updated when the mouse enter the Icon region.

I see 2 options here, either using a MouseRegion + IconButton, or you can use an InkWell + Icon as previously suggested.

Full example for option 1:

import 'package:flutter/material.dart';

void main() {  
  runApp(MyApp());
}

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isHovered = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter app'),
      ),
      body: Center(
        child: MouseRegion(
          onEnter: (_) {
            setState(() {
              _isHovered = true;
            });
          },
          onExit: (_) {
            setState(() {
              _isHovered = false;
            });
          },
          child: IconButton(
            onPressed: () {},
            icon: Icon(Icons.edit, color: _isHovered ? Colors.green[700] : null)
          ),
        ),
      ),
    );
  }
}

For option 2 using InkWell, replace the previous build method by:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Flutter app'),
    ),
    body: Center(
      child: InkWell(
        onTap: () {},
        onHover: (hovered) {
          setState(() {
            _isHovered = hovered;
          });
        },
        child: Icon(Icons.edit, color: _isHovered ? Colors.green[700] : null),
      ),
    ),
  );
}

The difference I see here is the appearance of the button when hovered, the Icon will be green but the hover regions are not the same size. But this can be easily tweaked.