How to add splash color or ripple effects to IconButtons or elevated Buttons

Question

On this screen there is an iconButton, a microphone the user must tap before repeating a word. I added splashcolor to the properties of the IconButton, but nothing shows when user taps. Same thing with ToolTip.

I had noticed random behaviors with my elevated buttons in other screens, sometimes we see the ripple effects, sometimes we don't. Is there something I am doing wrong? I read on forums that sometimes these effects happen "under" another widget, and so we can't see them.

Is there a rule as how to use the effects?

Here is the code:

SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.all(12.0),
            child: Text(
              'Ecoute et répète 5 fois le mot en anglais.',
              style: TextStyle(color: Colors.indigo[700], fontSize: 17),
            ),
          ),
          Container(
            margin: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(
                width: 1.0,
              ),
              borderRadius: BorderRadius.circular(10.0),
            ),
            padding: const EdgeInsets.all(16),
            child: Row(
              children: [
                Container(
                  height: 200,
                  child: Image.asset(
                    'images/avatar_teacher.jpeg',
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(3.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        child: Text(
                          'An adult',
                          style: TextStyle(
                            color: Colors.red[900],
                            fontSize: 23,
                          ),
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(bottom: 60),
                        child: Text(
                          'Un adulte',
                          style: TextStyle(
                            color: Colors.indigo[900],
                            fontSize: 15,
                          ),
                        ),
                      ),
                      GestureDetector(
                        child: Container(
                          height: 45,
                          margin: EdgeInsets.fromLTRB(0, 5.0, 0, 15.0),
                          alignment: Alignment.topRight,
                          child: Icon(
                            Icons.volume_up,
                            color: Colors.indigo[500],
                            size: 55.0,
                          ),
                        ),
                        onTap: () {
                          Tts.speak(phrase: 'little', langue: Language.english);
                        },
                      ),
                      Container(
                        alignment: Alignment.topRight,
                        child: Text('/adult/'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            color: Colors.white,
            child: Center(
              child: IconButton(
                  iconSize: 80,
                  splashRadius: 120,
                  splashColor: Colors.green,
                  tooltip: 'Répète le mot',
                  icon: Icon(
                    Icons.mic,
                    color: Colors.red[900],
                  ),
                  onPressed: () {
                    uD.checkSpokenWords('adult', reussite);
                  }),
            ),
          ),
          Container(
            alignment: Alignment.center,
            child: Text(
              'Clique sur le micro et répète le mot',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.black45,
                fontSize: 15.0,
              ),
            ),
          ),
          SizedBox(
            height: 2.0,
          ),
          Visibility(
            visible: false,
            child: Container(
              width: double.infinity,
              alignment: Alignment.centerLeft,
              margin: const EdgeInsets.only(top: 12),
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(
                  width: 1.0,
                ),
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  children: [
                    Text('Voici ce que j\'ai compris : '),
                    Text(uD.spokenWords),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );

score 1 · Answer 1 · answered Feb 19 '22 at 05:53

To change the splash color of Elevated Button just use overlayColor property in ButtonStyle

    ElevatedButton(
        style: ButtonStyle(
                  
           overlayColor: MaterialStateProperty.all(Colors.green),

           backgroundColor: MaterialStateProperty.all(Colors.black),
                  
        ),
        onPressed: () {
           //foobar
        },
        child: Icon(
           Icons.call,
           color: Colors.blue,
        ),
    ),

score 0 · Answer 2 · answered Jun 04 '21 at 12:45

0

You need to wrap your IconButton widget with a Material widget like this:

Container(
                color: Colors.white,
                child: Center(
                  child: Material(
                    color: Colors.transparent,
                    child: IconButton(
                        iconSize: 80,
                        splashRadius: 120,
                        splashColor: Colors.green,
                        tooltip: 'Répète le mot',
                        icon: Icon(
                          Icons.mic,
                          color: Colors.red[900],
                        ),
                        onPressed: () {
                          print('test');
                        }),
                  ),
                ),
              ),

Splashes and ripples only show up if they are on some type of material widget (e.g. a Card).

answered Jun 04 '21 at 12:45

Code on the Rocks

11,488
3
53
61

I did,but it doesn't seem to change the situation :( – SylvainJack Jun 04 '21 at 12:49
This container is inside a column which is inside a SingleChildScrollView, inside another container etc.... Could this have something to do with it ? – SylvainJack Jun 04 '21 at 12:52
Did you make the Material's color transparent? I forgot to mention that but my code above has it – Code on the Rocks Jun 04 '21 at 12:54
Yes, I copied it the way you wrote it – SylvainJack Jun 04 '21 at 12:54
It worked once.... but when I tap it another time, it doesn't work again – SylvainJack Jun 04 '21 at 13:01
That's odd. If you just make the button print('test') instead of your function, does it work after repeat uses? My guess is that your checkSpokenWords() function is causing the issue but I don't know for sure. I have the widget running in an app and it works everytime. – Code on the Rocks Jun 04 '21 at 13:05
Yep, you're absolutely right... the problem comes from there. My function is linked to the SpeechToText package : here the user must repeat the word he hears and it checks if the word was correctly said. – SylvainJack Jun 04 '21 at 13:07
Now it seems to work... even with my function... I did "flutter clean". Strange... Yet, when I tap, sometimes, it does a large square... another time a small circle.... Do you know if this can be chosen ? – SylvainJack Jun 04 '21 at 13:17
Hmm not sure, you might want to ask this as a separate question – Code on the Rocks Jun 04 '21 at 16:35

How to add splash color or ripple effects to IconButtons or elevated Buttons

2 Answers2