How can I hover my TextButtons in Flutter?

Amarildo 0
Viewed 36

I created three textbuttons in Flutter and now I want to hover their color from their default color to pink color. In the moment that my mouse is on the button, the button should change it's color to pink. Can anyone tell me how to fix this?

Container(
          color: Colors.grey[900],
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextButton(
                onPressed: () {},
                style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all(Colors.grey[600])),
                child: const Text(
                  'Registrieren',
                  style: TextStyle(color: Colors.white,fontSize: 20,),
                ),
              ),
              const SizedBox(
                width: 12,
              ),
              TextButton(
                onPressed: () {},
                style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all(Colors.grey[600])),
                child: const Text(
                  'Login',
                  style: TextStyle(color: Colors.white,fontSize: 20,),
                ),
              ),
              const SizedBox(
                width: 12,
              ),
              TextButton(
                onPressed: () {},
                style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all(Colors.grey[600])),
                child: const Text(
                  'Kontakt',
                  style: TextStyle(color: Colors.white,fontSize: 20,),
                ),
              )
            ],
          ),
        ),
flutter-web flutter-animation flutter-dependencies flutter-layout flutter
2 Answers

For the textButton we can use foregroundColor property of ButtonStyle.

TextButton(
  style: ButtonStyle(
  foregroundColor: MaterialStateProperty.resolveWith<Color>(
    (Set<MaterialState> states) {
    if (states.contains(MaterialState.hovered))
      return Colors.pink;
    return Colors.yellow; // null throus error in flutter 2.2+.
    }
  ),
),
  onPressed: () { },
  child: Text('TextButton with custom overlay colors'),
)
Sabahat Hussain Qureshi0

You need 'FocusableActionDetector'

FocusableActionDetector(
    actions: _actionMap,
    shortcuts: _shortcutMap,
    onShowHoverHighlight: _handleHoveHighlight,
    child:  // your button 

 
    ),
  ),




  bool _hovering = false;

  void _handleHoveHighlight(bool value) {
     setState(() {
        _hovering = value;
     });
   }

check here for more details

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

Heshan Sandeepa0
Related