< 토스 클론코딩 > 플러터에서 스크롤 시 텍스트 보이게 하기

토스에서 구현할 기능

스크롤 시 왼쪽 상단에 텍스트나타나는 것에 집중

구현 전 고민과 시행착오

• 영상에서 스크롤 시 appbar의 아랫부분의 크기가 줄어들며 왼쪽 상단에 텍스트와 숫자가 서서히 보였다
• 패키지가 분명 있겠다 싶어 구글링해봤으나 실패
• 여러 구현할 방법이 떠올랐지만 가장 직관적인 방법대로 일단 구현해보기로 결정

Idea

body에서 스크롤 위치를 감지하고 특정위치가 되면 appbar에서 텍스트 opacity를 변경(텍스트가 없다가 나타는 것처럼 보임)

//

위치 감지

class _MyAppState extends State<MyApp> {
  double _scrollPosition = 0;
  late ScrollController _scrollController;

appbar에 삼항연산자로 opacity 설정

AppBar(
          actionsIconTheme: IconThemeData(
            color: Colors.grey[800],
          ),
          title: Opacity(
            opacity: _scrollPosition > 50 ? 1 : 0,
            child: Row(
              children: [
                Text(
                  '짜잔~',
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                const SizedBox(
                  width: 5.0,
                ),
                Icon(Icons.icecream_rounded)
              ],
            ),

NotificationListener 사용

NotificationListener<ScrollNotification>(
          onNotification: (ScrollNotification notification) {
            setState(() {
              _scrollPosition = notification.metrics.pixels;
            });
            return true;
          },

• NestedScrollView에서는 직접 생성한 컨트롤러를 사용하기 어려웠다.
• NotificationListener 사용하니 onNotification 함수를 사용해 현재 스크롤 위치를 구할 수 있었다.

해결되지 않은 버그

• 이유는 모르겠으나 전체 스크롤이 아닌 다른 하위 위젯을 스크롤 할 때에도 상태변경을 감지한다.

다음번에는 오류도 해결하고 컨트롤러에대해 더 공부해서 오겠다. 그럼 안녕

작성자: 이예슬