OnPressed effect on font color

user_11486115 0
Viewed 48

I'm making simple custom Text button

SizedBox(
      height: 40,
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: (){},
          splashColor: Colors.black12,
          child: Center(
            child: Text(
              'Done',
              style: TextStyle(
                  fontSize: 18, color: Colors.white, fontWeight: FontWeight.w500),
            ),
          ),
        ),
      ),
    )

Now this works great however the effect on onTap event is around the text

enter image description here

How to make that effect to be on the text font only or if that is not possible change color of the text on tapped down and change it back on release

dart flutter
1 Answers

For changing the color of the text when pressed down, you can use the onHighlightChanged event handler of InkWell.

In your class declare a color property:

Color textColor = Colors.white;

And change your InkWell implementation:

InkWell(
   onTap: () {},
   splashColor: Colors.transparent,
   highlightColor: Colors.transparent,
   onHighlightChanged: (value) {
      setState(() {
         textColor = value ? Colors.white70 : Colors.white;
      });
   },
   child: Center(
      child: Text(
         Done',
         style: TextStyle(
            fontSize: 18,
            color: textColor,
            fontWeight: FontWeight.w500
         ),
      ),
   ),
)

Note:

  1. You have to set the splashColor as transparent
  2. You have to set the highlightColor as transparent
user_11043840
Related