Flutter Elevated Button Hover Color - flutter

Question

When I use the elevated button class inside the home page, its background color changes when hovering over it (because I am using 'MaterialStateProperty'):
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[50],
body: Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
ElevatedButton( // <----
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.black),
backgroundColor: MaterialStateProperty.all(Colors.blue[200]),
),
onPressed: myFunction,
child: Text("Click Me", style: TextStyle(fontSize: 20)),
),
],
),
),
),
);
}
But when I use my own class that return an elevated button, its background Color doesn't change when hovering over it:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[50],
body: Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.center
children: [
ButtonWidget("Click Me", myFunction, fontSize: 20) // <---- My own Class
),
],
),
),
),
);
}
My ButtonWidget Class:
class ButtonWidget extends StatefulWidget {
const ButtonWidget(
this.text,
this.command, {
this.padding = const EdgeInsets.all(10.0),
this.fontSize = 14.0,
Key? key,
}) : super(key: key);
final String text;
final Function command;
final EdgeInsets padding;
final double fontSize;
#override
State<ButtonWidget> createState() => _ButtonWidgetState();
}
class _ButtonWidgetState extends State<Button> {
#override
Widget build(BuildContext context) {
return Padding(
padding: widget.padding,
child: ElevatedButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.black),
backgroundColor: MaterialStateProperty.all(Colors.blue[200]),
),
onPressed: widget.command(),
child: Text(widget.text, style: TextStyle(fontSize: widget.fontSize)),
),
);
}
}
Why is this hapenning?

Answer 1

For using onHover you need to call it, but in your custom ButtonWidget you use wrong action, change :
onPressed: widget.command(),
to:
onHover: (value) { },
onPressed: widget.command(),
Note: for making onHover work, you should call empty onPressed too.