コンテナーをタップすると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も入れてみましたが、無駄でした。
ベストアンサー1
容器に色を付けるとインク効果が隠れてしまうと思います
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
これは実際には予想どおりですが、より明確にするためにドキュメントを更新する必要があります。
何が起こっているかというと、マテリアル仕様では、スプラッシュは実際にはマテリアル上のインクであるとされています。したがって、スプラッシュする場合、文字通りマテリアル ウィジェットにスプラッシュを実行させます。マテリアルの上に何かがある場合、その下にスプラッシュするので、見えません。
私は、概念的にそのイメージをマテリアルにも印刷し、スプラッシュがイメージの上に表示されるようにする「MaterialImage」ウィジェットを追加したいと考えていました。デコレーションに同様の機能を持つ MaterialDecoration を用意することもできます。または、マテリアル自体にデコレーションを持たせることもできます。現在は色だけを使用していますが、デコレーション全体も扱えるように拡張できます。ただし、グラデーション付きのマテリアルがマテリアル仕様と本当に互換性があるかどうかは不明なので、そうすべきかどうかはわかりません。
短期的には、回避策だけが必要な場合は、コンテナの上にマテリアルを配置し、そのマテリアルを「透明」タイプを使用するように設定してから、その中にインク ウェルを配置することができます。
--ヒクシー
更新: 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ウィジェットはテストしていません。コードはink_paint_test.dartとInkクラスのドキュメントからコピーしました。