Control on tap ripple effect on Flutter ElevatedButton

Question

Question

How can I change the duration and colour of the on tap ripple effect on an ElevatedButton? See the dart pad link for a working example of this ripple effect.

Code for working ElevatedButton

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text('Elevated Button', style: TextStyle(fontSize: 20)),
      ),
    );
  }
}

DartPad Link

https://dartpad.dev/369b01f31b06c18d4f47076319aa4da4

You can try `inkWell` in flutter, this might be helpful https://stackoverflow.com/questions/51115401/changing-speed-of-inkwell — vIvId_gOat, Jan 17 '21 at 04:26
Could you please show a working example of an inkwell with an ElevatedButton? — Adam Griffiths, Jan 17 '21 at 16:14

Wilson Wilson · Accepted Answer · 2021-01-17T20:14:57.827

It's pretty simple. Just make sure you return your desired overlay color when the current MaterialState is pressed.

    Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {},
            style: ButtonStyle(
              overlayColor: MaterialStateProperty.resolveWith(
                (states) {
                  return states.contains(MaterialState.pressed)
                      ? Colors.red
                      : null;
                },
              ),
            ),
            child: const Text(
              'Elevated Button',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),

Better still, you can use this as your buttonStyle:

ElevatedButton.styleFrom(
    onPrimary: Colors.yellow,
 ),

The only problem with this is that it affects your foreground color, but that's not too bad.

So your button with a custom splash should look like this:

      ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              onPrimary: Colors.yellow,
            ),
            child: const Text(
              'Elevated Button',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),

Changing the duration of the splash, however, is NOT possible, because, from the source code, the button's splash factory is hardcoded, and not open for modification.

...
splashFactory: InkRipple.splashFactory,

And as this answer shows, you need to modify the splash factory to change the duration.

If you really need that functionality, the quickest way to get that done would be to copy the code from the source and re-implement it yourself. But I wouldn't recommend that.

The more appropriate way you could do this would be to create your own custom button using a Material and an InkWell, but that wouldn't be an elevated button

The post consists of two questions, and the difficult part is how to change the duration of ripple? — iDecode, Jan 17 '21 at 19:16
Can this be the answer for you? https://stackoverflow.com/questions/51115401/changing-speed-of-inkwell — Jim, Jan 18 '21 at 10:12
@JimChiu I already linked that. It's not possible because SplashFactory is hardcoded in ElevatedButton. — Wilson Wilson, Jan 18 '21 at 11:27

score 5 · Answer 2 · answered Mar 10 '22 at 13:30

5

With Flutter 2.0, try this

ElevatedButton(
    style: ButtonStyle(
      overlayColor: MaterialStateProperty.all<Color>(Colors.black12)),
    onPressed: () {},
    child: Text('Ripple'))

answered Mar 10 '22 at 13:30

Heshan Sandeepa

3,388
2
35
45

1

Very nice and concise. – Michał Dobi Dobrzański Mar 29 '22 at 16:33

score 0 · Answer 3 · answered Aug 17 '21 at 23:16

You can use animationDuration for duration and onPrimary to change splash color.

return ElevatedButton(
      onPressed: action,
      child:
          Text(text, style: Theme.of(context).textTheme.subtitle1),
      style: ElevatedButton.styleFrom(
        onPrimary: Colors.black,
        animationDuration: Duration(milliseconds: 1000),
        primary: Colors.red,
        shadowColor: Colors.redAccent,
        elevation: 10,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
        ),
      ),
    );

Control on tap ripple effect on Flutter ElevatedButton

Question

Code for working ElevatedButton

DartPad Link

3 Answers3