[Flutter] Image에 ripple효과 넣기

일단 묻따 코드!

 Container(
                height: 100,
                width: double.infinity,
                child: Stack(
                  children:[
                    Positioned.fill(
                      bottom: 0.0,
                      child: ClipRRect(
                          borderRadius: BorderRadius.circular(10),
                          child: Image.asset('assets/images/maps_img.png',fit: BoxFit.cover,)),
                    ),
                    Positioned.fill(
                      child: Material(
                        color: Colors.transparent,
                        child: InkWell(
                          borderRadius: BorderRadius.circular(10),
                          onTap: () {  },
                          splashColor: Colors.grey.withOpacity(0.1),
                        ),
                      ),
                    )
                  ],
                ),
              ),

처음에 Image에 버튼을 넣어보려고 IconButton도 사용해보고 Inkwell도 사용해봤다

😂 그러나!!

리플효과가 뒤로 감쳐지는 것!

이유는 명확하지 않지만 아무래도 Image를 랜더링하는 중요도가 Inkwell 보다 우선 순위이지 않을까 싶다!..
때문에
Stack형태로 값을 줘도 Material없이는 여전히 리플효과가 감춰진다(?)

Material ! 로 감싸주기

실제로 Material을 사용해 형태를 커스터 마이징 할 때 Material의 우선순위가 먼저라 그런지 크기도, shadow주는 것들도 Material 을 통해 맞춰지는 상황이 많았다. 물론 이 경우에선 splash효과를 위한 것이기에 도움이 됐댜..!