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

Question

当我设置容纳IconButton的Container的颜色时,我发现IconButton的突出显示颜色被容器的颜色隐藏.这就是我的意思:

如何确保蓝色圆圈出现在红色方块上方？

这是我的代码:

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: ()=>{},),
        ),
      ),
    );
  }
}

Answer 1

InkSplash发生在最近的祖先Material小部件上.

您可以使用Material.of(context)该窗口小部件为InkSplashes提供一些帮助程序.

在你的情况下,它被InkResponse实例化IconButton引发Splash效果.但是目标Material小部件是由实例化的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: () => {},
        ),
      ),
    ],
  ),
);

Answer 2

尝试这个

 Material(
    color: Colors.transparent,
    shape: CircleBorder(),
    clipBehavior: Clip.hardEdge,
    child: IconButton(
      icon: Icon(Icons.arrow_back),
      iconSize: 30,
      color: Colors.white,
      onPressed: () {

      },
    ),
  );