I'm trying to change or quit the default color when hovering a widget in Flutter web, in specific with showMenu function like this: `

items: items.map(
  (item) {
    return PopupMenuItem<String>(
      value: item,
      child: SizedBox(
        width: widthItems,
        child: _HoverableMenuItem(
          text: item,
        ),
      ),
    );
  },
).toList(),`

and i tried to use MouseRegion to change the item color, like this

MouseRegion(
    onEnter: (_) => setState(() => _isHovered = true),
    onExit: (_) => setState(() => _isHovered = false),
    child: Container(
      color: _isHovered ? Colors.blue.withOpacity(0.1) : Colors.transparent,
      padding: const EdgeInsets.symmetric(
        vertical: 15,
        horizontal: 0,
      ),
      child: Text(
        widget.text,
        style: const TextStyle(
          fontSize: 12,
          fontWeight: FontWeight.w500,
        ),
      ),
    ),
  )

it works in some way, but there is still the default grey color behind when hovering , and i want to know if there is a way to hide it or just change it without quit completely the hover styles in my app

I'm trying to change or quit the default color when hovering a widget in Flutter web, in specific with showMenu function like this: `

items: items.map(
  (item) {
    return PopupMenuItem<String>(
      value: item,
      child: SizedBox(
        width: widthItems,
        child: _HoverableMenuItem(
          text: item,
        ),
      ),
    );
  },
).toList(),`

and i tried to use MouseRegion to change the item color, like this

MouseRegion(
    onEnter: (_) => setState(() => _isHovered = true),
    onExit: (_) => setState(() => _isHovered = false),
    child: Container(
      color: _isHovered ? Colors.blue.withOpacity(0.1) : Colors.transparent,
      padding: const EdgeInsets.symmetric(
        vertical: 15,
        horizontal: 0,
      ),
      child: Text(
        widget.text,
        style: const TextStyle(
          fontSize: 12,
          fontWeight: FontWeight.w500,
        ),
      ),
    ),
  )

it works in some way, but there is still the default grey color behind when hovering , and i want to know if there is a way to hide it or just change it without quit completely the hover styles in my app

• flutter
• flutter-theme

Share Improve this question Follow asked Nov 18, 2024 at 20:18 Erick GalvánErick Galván 3877 bronze badges 1

• Anything with a Color-type parameter can use a WidgetStateColor which can be programmed to automatically respond to hover state. You don't need the mouse stuff... it'll be automatic. – Randal Schwartz Commented Nov 18, 2024 at 23:02

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Do you think that something like it could be work for you?

           Center(
              child: Material(
            color: Colors.transparent,
            child: InkWell(
              onHover: (val) {
                setState(() {
                  colorHover = val ? Colors.red : Colors.yellow;
                });
              },
              onTap: () {},
              child: AnimatedContainer(
                color: colorHover,
                height: 400,
                width: 400,
                duration: Duration(milliseconds: 200),
                curve: Curves.easeIn,
                child: Container(
                  height: 400,
                  width: 400,
                ),
              ),
            ),
          )),

Need to declare Color colorHover = Colors.yellow;

More here: https://api.flutter.dev/flutter/material/InkWell-class.html