[플러터] ListView 경계선 흐리게 하기

ListView를 사용할 때 List가 끝나는 부분의 경계선을 부드럽게 만들어주고 싶을 때가 있다.

반투명을 주어 아래와 같이 자연스럽게 만들어주는 간단한 위젯이 존재한다.

 

ShaderMask

ShaderMask(
                      shaderCallback: (Rect bounds) {
                        return LinearGradient( //아래 속성들을 조절하여 원하는 값을 얻을 수 있다.
                          begin: Alignment.center,
                          end: Alignment.topCenter,
                          colors: [
                            Colors.white,
                            Colors.white.withOpacity(0.02)
                          ],
                          stops: [0.9, 1],
                          tileMode: TileMode.mirror,
                        ).createShader(bounds);
                      },
                      (child: ListView.builder( //List View

여러가지 속성들을 바꾸어 보면 알 수 있겠지만, 자식 위젯들 위에 색상이 입혀지는 방식으로 처리가 된다.

stops를 조절하며 범위를 설정할 수 있고, colors로 원하는 색상으로 하위 위젯을 덮을 수 있다.

위에서는 ListView의 자연스러운 스크롤을 위해 사용되었지만 디자인 측면에서 활용도가 높은 위젯이다.