In Flutter, I have made a ElevatedButton show 2 colours on itself, but I cant find a way also have a red splash/ripple effect on touch

I am new to Flutter 🙂 I think I am getting used to the () everywhere.
I have used Kivy previously.

I have got my widget showing two colours showing the % the button represents using gradients. That part of my widget works well.

However, I cannot find a way to get it to have a red ‘splash/ripple’ effect on a user’s tap also.

Kind regards, thank you in advance for any help.

PS: I liked the way Kivy, separated layout and logic – I think Flutter is missing that aspect.

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData(
            scaffoldBackgroundColor: const Color(0xFF445577),
          ),
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            body: Center(
              child: GradientElevatedButton(25),
            ),
          ),
        );
      }
    }
    
    class GradientElevatedButton extends StatelessWidget {
    
      final double percent;
    
      GradientElevatedButton(this.percent);
    
    
      @override
      Widget build(BuildContext context) {
        final Color background = Colors.green;
        final Color fill = Colors.lightGreen;
        final List<Color> gradient = [
          background,
          background,
          fill,
          fill,
        ];
    
        final double fillPercent = percent;
        final double fillStop = fillPercent / 100;
        final List<double> stops = [0.0, fillStop, fillStop, 1.0];
    
        return DecoratedBox(
            decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: gradient,
                  stops: stops,
                  end: Alignment.bottomCenter,
                  begin: Alignment.topCenter,
                ),
                borderRadius: BorderRadius.circular(2),
                boxShadow: <BoxShadow>[
                  BoxShadow(
                      color: Color.fromRGBO(0, 0, 0, 0.57), //shadow for button
                      blurRadius: 5) //blur radius of shadow
                ]),
            child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: Colors.transparent,
                  onSurface: Colors.transparent,
                  shadowColor: Colors.transparent,
                  //make colour or elevated button transparent
                ),
                onPressed: () {
                  print("You pressed Elevated Button");
                },
                child: Padding(
                  padding: EdgeInsets.only(top: 0, bottom: 0,),
                  child: Text("25%"),
                )));
      }
    }