Flutter 플러터에서 GridTile 내 이미지 위에 잉크웰 리플 효과 추가, InkWell ripple over top of image in GridTile in Flutter

질문

나는 사용자가 타일을 탭할 때 GridTile 안의 이미지 위에 리플 효과를 얻기 위해 InkWell을 사용하려고 시도하고 있습니다.

이미지 자체가 리플을 가리고 있는 것 같습니다. 이미지를 제거하면 리플이 보입니다.

아래는 단일 GridTile의 코드입니다.

return new InkWell(
  onTap: () => debugPrint(s.displayName),
  highlightColor: Colors.pinkAccent,
  splashColor: Colors.greenAccent,
  child: new GridTile(
    footer: new GridTileBar(
      title: new Text(s.displayName),
      subtitle: new Text(s.gameName),
      backgroundColor: Colors.black45,
      trailing: new Icon(
        Icons.launch,
        color: Colors.white,
      ),
    ),
    child: new Image.network( //this is obscuring the InkWell ripple
      s.imageSrc,
      fit: BoxFit.cover,
    ),
   ),
 );

나는 InkWell을 계층 구조의 다른 수준으로 이동하려고 시도했고, Container 안에 DecorationImage를 사용했지만 이러한 방법은 리플을 드러내지 못했습니다.

타일/이미지 위에 리플이 나타나게 하는 방법은 무엇인가요?

답변

이미지 위에 리플이 나타나도록 하기 위해 Stack을 사용하고 InkWell을 Material 위젯으로 감싸는 방법을 사용했습니다.

return new Stack(children: <Widget>[
        new Positioned.fill(
          bottom: 0.0,
          child: new GridTile(
              footer: new GridTileBar(
                title: new Text(s.displayName),
                subtitle: new Text(s.gameName),
                backgroundColor: Colors.black45,
                trailing: new Icon(
                  Icons.launch,
                  color: Colors.white,
                ),
              ),
              child: new Image.network(s.imageSrc, fit: BoxFit.cover)),
        ),
        new Positioned.fill(
            child: new Material(
                color: Colors.transparent,
                child: new InkWell(
                  splashColor: Colors.lightGreenAccent,
                  onTap: () => _launchStream(s.displayName),
                ))),
      ]);