[解決済み] InkWellでリップルエフェクトが表示されない

質問

コンテナをタップすると onTap() ハンドラを使用しますが、インクの飛沫の効果は表示されません。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
            color: Colors.orange,
          ),
        ),
      ),
    );
  }
}

を配置してみました。 InkWell の中に Container を使用しましたが、無駄でした。

解決方法は？

容器に色をつけると、インクの効果を覆い隠してしまうのでは？

https://api.flutter.dev/flutter/material/InkWell/InkWell.html

このコードは動作するようです

  body: new Center(
    child: new Container(
      child: new Material(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
          ),
        ),
        color: Colors.transparent,
      ),
      color: Colors.orange,
    ),
  ),

真ん中の四角をクリックするだけです。

編集：バグレポートが見つかりました。 https://github.com/flutter/flutter/issues/3782

これは実は予想通りなのですが、より明確にするためにドキュメントを更新する必要があります。

何が起こっているかというと、Materialの仕様では、スプラッシュは実際にはMaterial上のインクであるとされているのです。つまり、スプラッシュを発生させるときは、文字通り、Material ウィジェットにスプラッシュを発生させるのです。Materialの上に何かがあれば、その下にスプラッシュが発生し、それを見ることはできません。

MaterialImage"ウィジェットを追加して、画像をマテリアルにプリントし、その画像の上に水しぶきがかかるようにしたいと思ったことがあります。装飾のために似たようなことをする MaterialDecoration があるかもしれません。あるいは、マテリアル自体に装飾を持たせることもできます。今は色を受け取っていますが、これを拡張して装飾全体を受け取るようにすることもできます。ただ、グラデーションを持つマテリアルが本当にマテリアルスペックに適合しているかどうかは不明なので、そうするべきかどうかはわかりません。

短期的な回避策としては、コンテナの上にマテリアルを置き、そのマテリアルが "transparency"タイプを使用するように設定し、その中にインクウェルを置くことができます。

--hixie

アップデート：Hixieは昨年、新しいInkソリューションをマージしました。Inkは、画像の上にスプラッシュをかける便利な方法を提供します。

  testWidgets('Does the Ink widget render anything', (WidgetTester tester) async {
    await tester.pumpWidget(
      new Material(
        child: new Center(
          child: new Ink(
            color: Colors.blue,
            width: 200.0,
            height: 200.0,
            child: new InkWell(
              splashColor: Colors.green,
              onTap: () { },
            ),
          ),
        ),
      ),
    );


Material(
  color: Colors.grey[800],
  child: Center(
    child: Ink.image(
      image: AssetImage('cat.jpeg'),
      fit: BoxFit.cover,
      width: 300.0,
      height: 200.0,
      child: InkWell(
        onTap: () { /* ... */ },
        child: Align(
          alignment: Alignment.topLeft,
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Text('KITTEN', style: TextStyle(fontWeight: FontWeight.w900, color: Colors.white)),
          ),
        )
      ),
    ),
  ),
)

注意: 私は新しい Ink Widget をテストしていません。ink_paint_test.dartとInkクラスのドキュメントからコードをコピーしてきました。

https://github.com/Hixie/flutter/blob/1f6531984984f52328e66c0cd500a8d517964564/packages/flutter/test/material/ink_paint_test.dart

https://github.com/flutter/flutter/pull/13900

https://api.flutter.dev/flutter/material/Ink-class.html