본문 바로가기

IT/Flutter

[Flutter] InkWell on image, 잉크웰을 이미지 위에서 작동시키기

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),
                ))),
      ]);

이미지에다가 잉크웰을 덮으면 클릭 이벤트는 작동하나, 잉크웰 애니메이션 효과는 작동하지 않는다.

아마도 이미지자체가 가장 높으 레이어에 위치해있는거 같다. 

 

이런경우는 위의 코드와 같이 스택으로 구성해서, 가장 위의 레이어에다가 잉크웰을 넣어서 터치 이벤트를 케치하면 OK

 

 

스텍오버플로우 만세~~~

출처: https://stackoverflow.com/questions/48066321/inkwell-ripple-over-top-of-image-in-gridtile-in-flutter

 

InkWell ripple over top of image in GridTile in Flutter

I'm trying to use InkWell to get a ripple effect on top of an image inside of a GridTile when the user taps on the tile. I believe the image itself is obscuring the ripple because when I remove the

stackoverflow.com