Flutter Elevated Button Hover Color-CodePudding

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?

CodePudding user response：

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.