CODEWITHSUNDEEP
flutter
DangerMoose007
DangerMoose007

Reputation: 13

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%"),
                )));
      }
    }

Upvotes: 0

Views: 752

Answers (2)

krunal Gajera
krunal Gajera

Reputation: 162

///try this way

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    splashFactory: NoSplash.splashFactory,
  ),
  child: child,
),

Upvotes: 1

hari kurniawan
hari kurniawan

Reputation: 44

You can use onPrimary to change splash color

ElevatedButton(
      
            style: ElevatedButton.styleFrom(
              onPrimary: Colors.red,
              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%"),
            )),

Upvotes: 1

Related Questions