CODEWITHSUNDEEP
buttonflutterdartgradient
Hasen
Hasen

Reputation: 12338

Flutter button with gradient when pressed for it's highlight colour

I have a button with a gradient colour so I want the gradient to reverse when it's pressed and then when the press is released for the gradient colour to go back to how it was when it started.

I have the gradient colours in an array so can be easily swapped but not sure how this can be done. I did this effect with React Native previously so am wondering how to do it with Flutter.

At the moment it's just using one colour with highlightColor when pressed but this looks too basic.

 const gradientcolours = [
  [Color(0xFF00000), Color(0xFFFFFFF)],
  [Color(0xFFFFFFF), Color(0xFF00000)]
];

    return Container(
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(60),
      ),
      child: Container(
        padding: EdgeInsets.all(2),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(60),
          gradient: LinearGradient(
              begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: gradientcolours[0]),
        ),
        child: RawMaterialButton(
          splashColor: Color(0xFF030303),
          highlightColor: Color(0xFF030303),
          child: Text('Press'),
            child: Container(
              height: 40,
              width: 40,
            ),
          ),
          onPressed: onPressed,
          constraints: BoxConstraints.tightFor(
            width: 80,
            height: 80,
          ),
          shape: CircleBorder(),
        ),
      ),
    );

Upvotes: 1

Views: 1342

Answers (1)

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29458

You could try something like:

int index = 0;

/* ... */

Listener(
  child: Container(
    padding: EdgeInsets.all(2),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(60),
      gradient: LinearGradient(
          begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: gradientcolours[index]),
    ),
    /* ... */
  ),
  onPointerDown: (_) {
    setState(() {
      index = 1;
    });
  },
  onPointerUp: (_) {
    setState(() {
      index = 0;
    });
  },
);

Upvotes: 3

Related Questions