Flutter 如何使图标按钮的高亮颜色显示在父窗口小部件上？

当我设置包含图标按钮的容器的颜色时，我发现图标按钮的高亮颜色被容器的颜色隐藏。我的意思是：

如何确保蓝色圆圈出现在红色正方形上方

这是我的密码：

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.of（context）

获取该小部件，它为喷墨提供了一些帮助

在您的例子中，它是引发飞溅效果的

InkResponse

实例。 但是目标小部件由

Scaffold

实例化。这是你的祖先。因此，背景会在您的墨迹之上绘制

要解决这个问题，您必须在您的背景和

IconButton

之间引入一个新的

Material

实例

这导致：

我们解决了这个问题。但现在它被剪掉了！ 让我们继续

最简单的选择是将渲染分为两个分支。一个用于后台，一个用于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: () => {},
        ),
      ),
    ],
  ),
);

返回新脚手架(
正文：新堆栈(
fit:StackFit.expand，
儿童：[
新中心(
子容器：新容器(
身高：60.0，
宽度：60.0，
颜色：颜色，红色，
),
),
新材料(
类型：MaterialType.transparency，
孩子：新的图标按钮(
highlightColor:Colors.blue，
图标：新图标（图标。添加照片），
按下：（）=>{}，
),
),
],
),
);