용기에 색을 더하는 것이 잉크 효과를 덮는 것 같아요
https://docs.flutter.io/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
업데이트 : Hixie는 작년에 새로운 잉크 솔루션을 병합했습니다. 잉크는 이미지 위에 튀는 편리한 방법을 제공합니다.
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_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
Material
그대로두고Container
.