[Flutter] InkWell의 Splash 효과가 작동하지 않을 때

  @override
  Widget build(BuildContext context) {
    return InkWell( // not working!
      onTap: () {
        debugPrint('Pressed SimpleItemBox!');
      },
      splashColor: Colors.amber,
      borderRadius: BorderRadius.circular(10.0),
      child: Container(
        width: 240.0,
        height: 150.0,
        decoration: BoxDecoration( // cause!
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          border: Border.all(color: Colors.grey[400]!),
        ),
        child: // ...existing code...
      ),
    );

InkWell의 child에 Container의 decoration을 사용하면 스플래쉬 효과가 나타나지 않는 현상이 발생했다.

  @override
  Widget build(BuildContext context) {
    return Material( // add
      child: Ink(    // add
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          border: Border.all(color: Colors.grey[400]!),
        ),
        child: InkWell(
          onTap: () {
            debugPrint('Pressed SimpleItemBox!');
          },
          splashColor: Colors.amber,
          borderRadius: BorderRadius.circular(10.0),
          child: SizedBox(
            width: 240.0,
            height: 150.0,
            child: // ...existing code...
          ),
        ),
      ),
    );

이 때, InkWell의 상위에 Material과 Ink를 추가하고 Ink에 decoration을 사용하면 문제가 해결된다.

• StackOverFlow - Inkwell not showing ripple when used with Container decoration