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),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );

Answer 1

To make the splashColor background circular behind the IconButton, add the following code:

Material(
       color: Colors.transparent,
       clipBehavior: Clip.hardEdge,
       borderRadius: BorderRadius.circular(50),
       child: IconButton(
       splashColor: Colors.black.withOpacity(0.8),

Answer 2

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).

Answer 3

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,
        ),
    ),