[Flutter] Container에 배경색과 Ripple 효과 넣기

1. 기본 컨테이너 위젯

Container(
  width: 32,
  height: 40,
  child: Text("컨테이너"),
  )

Container 위젯을 만들 때 위와 같이 사용하게 되는데 

InkWell(
  onTap: () => {},
  child: Container(
    width: 32,
    height: 40,
    color: Colors.red,
    child: Text("탭"),
  ),
),

여기에 onTab 이벤트를 넣기 위해 위 처럼 작성 하게 되는데 여기서 Container에 color로 배경색을 지정해 버리면 InkWell의 Ripple 효과가 동작하지 않습니다.

 

2. 배경색을 유지하면서 InkWell Ripple 도 유지 하기.

InkWell(
  onTap: () => {},
  child: Ink( /// 잉크로 감싸기
    decoration: BoxDecoration(
      color: Colors.red, 
    ),
    child: Container(
      width: 32,
      height: 40,
      child: Text("탭"),
    ),
  ),
),

그래서 만약 Ripple 효과를 유지하고 싶으면 위 예시 처럼 Ink로 감싸서 색을 지정하면 Ripple가 동작합니다.

 

3. 복잡한 위젯에 넣었을 때는 동작하지 않는 경우가 있습니다.

Widget testWidget() {
    return Material(
      clipBehavior: Clip.hardEdge, // 리플이 사각형으로 나오기 때문에 radius먹이는 옵션? 마스킹 한다고 보면 됨
      borderRadius: BorderRadius.circular(10.0),
      child: Ink( // container 대신 Ink 로 모양을 내주면 된다.
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.2), // 그림자의 색상 및 투명도 설정
              spreadRadius: 0, // 그림자 확산 정도
              blurRadius: 0, // 그림자의 흐림 정도
              offset: const Offset(0, 0), // 그림자의 위치 (가로, 세로)
            ),
          ],
        ),
        child: InkWell(
          onTap: () {
          // 탭 이벤트
          },
          child: Container(
            height: 50,
            padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 14),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text('Test text'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

 

위처럼 Material 을 먹여야 정상적으로 동작하는 경우가 있습니다