Flutter : IconButtonを押したときのスプラッシュが隠れてしまう

Question

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                SizedBox(height:20.0,),
                Container(
                  decoration: BoxDecoration(
                    color: Colors.orange[100],
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                  ),
                  height: 60,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Transform.rotate(
                        angle: pi * 1 / 16,
                        child: IconButton(
                          iconSize: 30,
                          color: Colors.purpleAccent,
                          icon: Icon(Icons.accessibility_new),
                          onPressed: () {
                            print("pushed");
                          },
                        ),
                      ),
                      IconButton(
                        highlightColor:Colors.pink ,
                        splashRadius:50,
                        iconSize: 30,
                        color: Colors.cyanAccent,
                        icon: Icon(Icons.accessibility_new),
                        onPressed: () {
                          print("pushed");
                        },
                      ),
                      FlatButton(
                        child: Text("Flat"),
                        onPressed: () {
                          print("pushed");
                        },
                      ),
                      RaisedButton(
                        child: Text("Raised"),
                        onPressed: () {},
                      ),
                      OutlineButton(
                        child:Text("Outline"),
                        onPressed:(){},
                      ),
                    ],
                  ),
                ),

                SizedBox(height:20.0,),
                /*
                      Transform.rotate(
                        angle: pi * 1 / 16,
                        child: IconButton(
                          iconSize: 50,
                          color: Colors.indigoAccent,
                          icon: Icon(Icons.accessibility_new),
                          onPressed: () {},
                        ),
                      ),
                      */

                Container(
                  decoration: BoxDecoration(
                    color: Colors.green[100],
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                  ),
                  height: 120,
                  child: Wrap(
                    //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Transform.rotate(
                        angle: pi * 1 / 16,
                        child: IconButton(
                          iconSize: 30,
                          color: Colors.purpleAccent,
                          icon: Icon(Icons.accessibility_new),
                          onPressed: () {
                            print("pushed");
                          },
                        ),
                      ),
                      Transform.rotate(
                        angle: pi * 1 / 16,
                        child: IconButton(
                          iconSize: 30,
                          color: Colors.cyanAccent,
                          icon: Icon(Icons.accessibility_new),
                          onPressed: () {
                            print("pushed");
                          },
                        ),
                      ),
                      TextButton(
                        child: Text("Text"),
                        onPressed: () {
                          print("pushed");
                        },
                      ),
                      ElevatedButton(
                        child: Text("ElevatedButton"),
                        onPressed: () {},
                      ),
                      OutlinedButton(
                        child: Text("OutlinedButton"),
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print("pushed");
        },
      ),
    );
  }
}

たまたま気付いたのですが、IconButtonをContainerでラップして、Containerの背景色を設定すると、上記画像のように押したときの効果(スプラッシュ)が隠れてしまいます。
Containerの背景色を設定しないと普通にスプラッシュが見えます。
これって背景色を設定しても、スプラッシュを見えるようにする方法は有るのでしょうか?

Answer 1

あ〜「背景色を設定しているContainer」これをそのままInkウィジェットにしてみてください。どうですか？（未検証）

Comments

[moriman]

Inkの効果が前面に見えるようになりました。
期待通りになりました。
ありがとうございました。