I am trying to apply a specific background color when an ElevatedButton is hovered. However, the color isn't being applied in the hovered state. After logging all the states, I noticed they appear empty.

How can I make the hover effect work properly? Here's my code:

 ButtonStyle _buildSoftStyle(Color color) {
    return ElevatedButton.styleFrom(
      backgroundColor: WidgetStateColor.resolveWith((states) {
        if (states.contains(WidgetState.hovered)) {
          return hoverColor ?? color;
        }
        return color.withValues(alpha: 0.1);
      }),
      foregroundColor: color,
      minimumSize: Size(width, height),
    ).merge(style);
  }

Please note that I am referring to Flutter Web in this context. Haven't tested this on other targets yet.

I am trying to apply a specific background color when an ElevatedButton is hovered. However, the color isn't being applied in the hovered state. After logging all the states, I noticed they appear empty.

How can I make the hover effect work properly? Here's my code:

 ButtonStyle _buildSoftStyle(Color color) {
    return ElevatedButton.styleFrom(
      backgroundColor: WidgetStateColor.resolveWith((states) {
        if (states.contains(WidgetState.hovered)) {
          return hoverColor ?? color;
        }
        return color.withValues(alpha: 0.1);
      }),
      foregroundColor: color,
      minimumSize: Size(width, height),
    ).merge(style);
  }

Please note that I am referring to Flutter Web in this context. Haven't tested this on other targets yet.

• flutter

4 Answers 4

The MouseRegion detects the mouse event we are utilizing the two callback and updating the isHovered variable state and based on that variable we are assigning the color to the background.

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

  @override
  State<CustomButton> createState() {
    return _CustomButtonState();
  }
}

class _CustomButtonState extends State<CustomButton> {
  bool isHoverd = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (event) {
        setState(() {
          isHoverd = true;
        });
      },
      onExit: (event) {
        setState(() {
          isHoverd = false;
        });
      },
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: isHoverd ? Colors.red : Colors.green,
        ),
        onPressed: () {},
        child: Text("Your Button"),
      ),
    );
  }
}

Try below code and see your expected result on futter web. If you want to change color on button pressed you will do that as well see WidgetState

ElevatedButton(
        style: ButtonStyle(
          backgroundColor: WidgetStateProperty.resolveWith<Color>(
            (Set<WidgetState> states) {
              if (states.contains(WidgetState.hovered)) {
                return Colors.green; // button hover Color.
              }
              return Colors.blue; // button default Color.
            },
          ),
          foregroundColor: WidgetStateProperty.resolveWith<Color>(
            (Set<WidgetState> states) {
              if (states.contains(WidgetState.hovered)) {
                return Colors.white; // Text hover Color.
              }
              return Colors.white; // Text default Color.
            },
          ),
        ),
        onPressed: () {},
        child: const Text('Ok'),
      ),

ButtonStyle _buildSoftStyle(Color color) {
  return ElevatedButton.styleFrom(
    foregroundColor: color, // Text/icon color
    minimumSize: Size(width, height),
  ).copyWith(
    backgroundColor: MaterialStateProperty.resolveWith((state) {
      if (state.contains(MaterialState.hovered)) {
        return hoverColor ?? color.withOpacity(0.5); // You can set hover color
      }
      return color.withOpacity(0.3); // Give a default color
    }),
  );
}

Try this once if this could help I have tried this and copyWith helped me if this could help u soo.

Updated answer: One of the easiest way to achieve this will be:

Elevated btn has onhover functionality which you can use

class _MyState extends State<MyPage> {
  bool _flag = true;

  @override
  Widget build(BuildContext context) {
   return Scaffold(
    body: Center(
      child: ElevatedButton(
        onHover: () => setState(() => _flag = !_flag),
        child: Text(_flag ? 'Red' : 'Green'),
        style: ElevatedButton.styleFrom(
          backgroundColor: _flag ? Colors.red : Colors.teal, // This is what you need!
        ),
      ),
     ),
   );
  }
}