IconButtonのハイライトカラーを親ウィジェット上に表示する方法は？

Question

IconButtonを保持するコンテナの色を設定すると、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にいくつかのヘルパーを提供します。

IconButtonによってインスタンス化され、スプラッシュエフェクトを引き起こします。 ターゲットのMaterialウィジェットはScaffoldによってインスタンス化されています。あなたの背景の祖先です。したがって、背景はあなたのInkSplashの上に塗りつぶします。

この問題を解決するには、新しいMaterialインスタンスを自分のバックグラウンドとIconButtonの間に導入する必要があります。つながる

：

GUHは、我々は問題を解決しました。しかし今、それは切り取られました！ 続きます。

最も簡単なオプションは、2つのブランチでレンダリングを分割することです。 1つはバックグラウンド用、もう1つは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:() => {}, 
     ), 
    ), 
    ], 
), 
);