title: How to add splash color or ripple effects to IconButtons or elevated Buttons
body: <p>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.</p>
  <p>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 &quot;under&quot; another widget, and so we can't see them.</p>
  <p>Is there a rule as how to use the effects?</p>
  <p>Here is the code:</p>
  <pre><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),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      );
  </code></pre>