flutter - 如何向 IconButtons 或提升的 Buttons 添加启动颜色或波纹效果

问题描述

在这个屏幕上有一个图标按钮，用户在重复一个词之前必须点击一个麦克风。我在 IconButton 的属性中添加了 splashcolor，但是当用户点击时没有显示任何内容。与工具提示相同。

我注意到我在其他屏幕上提升按钮的随机行为，有时我们会看到连锁反应，有时我们不会。有什么我做错了吗？我在论坛上读到，有时这些效果会发生在另一个小部件“下”，因此我们看不到它们。

有没有关于如何使用效果的规则？

这是代码：

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

标签： fluttericonbuttonripple-effect

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

flutter - 如何向 IconButtons 或提升的 Buttons 添加启动颜色或波纹效果

问题描述

解决方案

推荐阅读