How can I hover the color of my text in Flutter?-CodePudding

I have build a popup button using Flutter but I'm not finding a way to change the text color when I put my cursor over it without clicking it. I want that the title of the popupbutton to change in pink. Does anyone knows how can I do this? Below you can find my code sample

PopupMenuButton(
                    tooltip: '',
                    child: Text(
                      'Hello',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontFamily: 'Poppins',
                      ),
                    ),
                    itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),

CodePudding user response：

First define a variable for each PopupMenuButton like this:

bool firstIshovering = false;
bool secondIshovering = false;

then wrap your PopupMenuButton with MouseRegion widget if you want the all PopupMenuButton get hover:

MouseRegion(
            onEnter: (details) => setState(() => firstIshovering = true),
            onExit: (details) => setState(() {
              firstIshovering = false;
            }),
            child: PopupMenuButton(
                tooltip: '',
                child: Text(
                  'Hello',
                  style: TextStyle(
                    color: firstIshovering ? Colors.red : Colors.black,
                    fontSize: 24,
                    fontFamily: 'Poppins',
                  ),
                ),
                itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
          ),

 MouseRegion(
            onEnter: (details) => setState(() => secondIshovering = true),
            onExit: (details) => setState(() {
              secondIshovering = false;
            }),
            child: PopupMenuButton(
                tooltip: '',
                child: Text(
                  'Hello',
                  style: TextStyle(
                    color: secondIshovering ? Colors.red : Colors.black,
                    fontSize: 24,
                    fontFamily: 'Poppins',
                  ),
                ),
                itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
          ),

if you want just child text get hover use this:

PopupMenuButton(
              tooltip: '',
              child: MouseRegion(
                onEnter: (details) => setState(() => ishovering = true),
                onExit: (details) => setState(() {
                  ishovering = false;
                }),
                child: Text(
                  'Hello',
                  style: TextStyle(
                    color: ishovering ? Colors.red : Colors.black,
                    fontSize: 24,
                    fontFamily: 'Poppins',
                  ),
                ),
              ),
              itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),

CodePudding user response：

you can use mouseRegion class of flutter.

https://api.flutter.dev/flutter/widgets/MouseRegion-class.html

MouseRegion(
        onHover: _updateColor,
        child: Container()
        );