Hover Color for Icon

Question

I am trying to implement a favorite Button in Flutter. I am happy with the properties when clicking the button but I am not happy with the hover animation.

I want that only the icon color changes on a hover. I don't like the Bubble around the IconButton. Here is my approach:

MouseRegion FavoriteButton(int index) {
bool _favoriteHover = false;
return MouseRegion(
  onHover: (e) {
    setState(() {
      _favoriteHover = true;
    });
  },
  child: IconButton(
    icon: Icon(
      _projects[index].favorite
          ? Icons.favorite
          : Icons.favorite_border_outlined,
      color: _favoriteHover ? Colors.yellow : Colors.white,
    ),
    onPressed: () {
      setState(() {
        _projects[index].favorite
            ? _projects[index].favorite = false
            : _projects[index].favorite = true;
        // TODO: Save Favorite state to config
      });
    },
    color: Colors.transparent,
  ),
);

Unfortunately, the icon color does not change on hover. Someone can help?

Answer 1

You try:

Don't hover: https://i.stack.imgur.com/oxGUh.png

Hover:https://i.stack.imgur.com/UyW2j.png

/// Flutter code sample for MouseRegion

// This example makes a [Container] react to being entered by a mouse
// pointer, showing a count of the number of entries and exits.

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

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool _favorite = false;
  void _incrementEnter(PointerEvent details) {
    setState(() {
      _favorite = true;
    });
  }

  void _incrementExit(PointerEvent details) {
    setState(() {
        _favorite = false;
    });
  }

  Icon setIcon(){
    if(_favorite){
      return Icon(Icons.favorite);
    }
    return Icon(Icons.favorite_border_outlined);
  }
  Color setColor(){
     if(_favorite){
      return Colors.yellow;
    }
    return Colors.black;
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MouseRegion(
        onEnter: _incrementEnter,
        onExit: _incrementExit,
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              IconButton(
                icon: setIcon(),
                color: setColor(),
                onPressed: (){},
              ),
            ],
          ),
        ),
      ),
    );
  }
}


  [1]: https://i.stack.imgur.com/UyW2j.png