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

Question

当我设置容纳一个IconButton的Container的颜色时，我发现IconButton的高亮颜色被容器的颜色隐藏。这里就是我的意思是：

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

这里是我的代码：在最近的祖先Material部件发生

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.of(context)获取该小部件，该小部件为InkSplashes提供了一些帮助程序。

对你而言，它的InkResponse由IconButton实例化，这引起了Splash效果。 但是，目标Material小部件由Scaffold实例化。这是你背景的祖先。因此，背景将绘制在InkSplash上​​方。

要解决此问题，您必须在背景和IconButton之间引入一个新的Material实例。

导致：

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

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