Is there a way to change the Text color inside of a FlatButton when highlightColor of the button is changed?

86 Views Asked by At

I want to change the color of Text widgets text inside of a FlatButton when the FlatButtons highlight color changes. Higlight color of a FlatButton is changed when the user is pressing the button for a long time. Here is the example code of the button that I have:

 class DefaultButton extends StatelessWidget {
  const DefaultButton({
    Key key,
    this.text,
    this.press,
    this.buttonColor = primaryColor,
  }) : super(key: key);
  final String text;
  final Function press;
  final Color buttonColor;
 

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 50,
      child: FlatButton(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
        highlightColor: Colors.yellow,
        color: buttonColor,
        onPressed: press,
        child: Text(
          text,
          style: TextStyle(
            fontFamily: primaryFontFamily,
            fontWeight: FontWeight.w400,
            fontSize: 20,
            color: primaryColor,
          ),
        ),

      ),
    );
  }
}

What is the best way to achieve this? Thank you!

1

There are 1 best solutions below

0
On

Don't know exactly how you use this FlatButton as Muhammad correctly point but the straightest solution is to use a boolean

FlatButton(
          color: !pressed ? Colors.blue : Colors.amber,
          onPressed: null,
          onLongPress: () {
            setState(() {
              pressed = !pressed;
            });
          },
          child: Text(
            'text',
            textAlign: TextAlign.left,
            style: TextStyle(
              color: pressed ? Colors.blue : Colors.amber,
              fontWeight: FontWeight.w600,
              fontSize: 14.0,
              height: 1.2,
            ),
          ),
        ),

Then manage your state as you wish Bloc, StreamBuilder choose your poison