如何使 IconButton 的突出显示颜色显示在父窗口小部件上？

当我设置包含 IconButton 的容器的颜色时，我发现 IconButton 的突出显示颜色被容器的颜色隐藏了。这就是我的意思：

如何保证蓝圈出现above红方块？

这是我的代码：

import 'dart:ui';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyDemo()));
}

class MyDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Container(
          width: 60.0,
          height: 60.0,
          color: Colors.red,
          child: new IconButton(
            highlightColor: Colors.blue,
            icon: new Icon(Icons.add_a_photo), onPressed: ()=>{},),
        ),
      ),
    );
  }
}

InkSplash 发生在最近的祖先上Material https://docs.flutter.io/flutter/material/Material-class.html widget.

您可以使用以下方式获取该小部件Material.of(context)它为 InkSplashes 提供了一些帮助程序。

在你的情况下，它是InkResponse实例化为IconButton https://docs.flutter.io/flutter/material/IconButton-class.html从而引发飞溅效果。 但针对的Material https://docs.flutter.io/flutter/material/Material-class.html小部件实例化为Scaffold。这是你背景的祖先。因此背景绘制在 InkSplash 上方。

为了解决这个问题你必须引入一个新的Material你的背景和你的背景之间的实例IconButton.

这导致 ：

呃，我们解决了问题。但现在已经被剪掉了！ 我们继续吧。

最简单的选择是将渲染分为两个分支。一种用于背景，一种用于 UI。类似的东西应该可以解决问题：

return new Scaffold(
  body: new Stack(
    fit: StackFit.expand,
    children: <Widget>[
      new Center(
        child: new Container(
          height: 60.0,
          width: 60.0,
          color: Colors.red,
        ),
      ),
      new Material(
        type: MaterialType.transparency,
        child: new IconButton(
          highlightColor: Colors.blue,
          icon: new Icon(Icons.add_a_photo),
          onPressed: () => {},
        ),
      ),
    ],
  ),
);