앱 개발/Flutter

22. [Flutter] ScrollBar 스크롤 할 때 AppBar title 표시하기

mroh1226 2023. 7. 4. 11:47
반응형

ScrollBar

scrollBar는 스크롤 가능한 위젯(예: ListView, GridView)에 수직 또는 수평 스크롤 바를 추가하는 데 사용되는 위젯입니다. 스크롤 바는 사용자에게 현재 스크롤 위치를 시각적으로 표시하고, 사용자가 스크롤 바를 조작하여 컨텐츠를 스크롤할 수 있도록 합니다.

ScrollBar 위젯은 스크롤 가능한 위젯과 함께 사용되며, 스크롤 위치를 제어하기 위해 ScrollController를 사용합니다.

ScrollController는 스크롤 가능한 위젯과 스크롤 바 사이의 중개자 역할을 합니다. 이 컨트롤러를 사용하여 스크롤 위치를 읽거나 설정하고, 스크롤 위치에 대한 애니메이션 및 스크롤 이벤트 처리를 수행할 수 있습니다.

ScrollController의 주요 메서드와 속성은 다음과 같습니다:

  • offset: 현재 스크롤 위치를 나타내는 값입니다. 이 값을 읽고 설정하여 스크롤 위치를 조작할 수 있습니다.
  • jumpTo(double offset): 주어진 오프셋으로 스크롤 위치를 즉시 이동합니다.
  • animateTo(double offset, {Duration duration, Curve curve}): 주어진 오프셋으로 스크롤 위치를 부드럽게 이동합니다. 애니메이션의 지속 시간과 곡선을 설정할 수 있습니다.
  • addListener(VoidCallback listener): 스크롤 위치가 변경될 때마다 호출되는 리스너를 추가합니다. 스크롤 이벤트를 처리할 수 있습니다.
  • dispose(): ScrollController를 해제하고 리소스를 정리합니다.
    스크롤 바를 사용하려면 먼저 스크롤 가능한 위젯에 ScrollController를 연결해야 합니다. 그런 다음 ScrollBar 위젯을 해당 스크롤 가능한 위젯과 함께 사용하여 스크롤 바를 표시합니다. ScrollBar 위젯은 controller 속성을 통해 ScrollController를 받아와서 해당 스크롤 가능한 위젯과 연결합니다.

 

 

import 'package:flutter/material.dart';
import 'package:flutter_application_ticktok_clone/constants/gaps.dart';

class TestScreen extends StatefulWidget {
  const TestScreen({super.key});

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  final listitem = [
    '탑건',    '레옹',    '웨스트 사이드 스토리',
    '태양은 없다',    '번지점프를 하다',    '빌리 엘리어트',
    '해리포터와 마법사의 돌',    '센과 치히로의 행방불명',    '그녀에게',
    '툼레이더 2 : 판도라의 상자',    '하나와 앨리스',    '해리포터와 아즈카반의 죄수',
    '릴리 슈슈의 모든 것',    '초속5센티미터',    '트랜스포머',
    '집오리와 들오리의 코인로커',    '트와일라잇',    '호우시절',
    '서칭 포 슈가맨',    '피에타',    '7번방의 선물',    '변호인',    '사이비',
    '겨울왕국',    '국제시장',    '비긴 어게인',    '내부자들: 디 오리지널',
    '더폰',    '도라에몽 : 스탠 바이 미',    '러브 앤 머시',    '맥베스',
    '미라클 벨리에',    '뷰티인사이드',    '극장판 파워레인저: 애니멀포스 VS 닌자포스 미래',
    '스물',    '연평해전',    '열정같은소리하고있네'
  ];
  final ScrollController _scrollController = ScrollController();
  late bool _appBarVisible = false;
  void _onScroll() {
    if (_scrollController.offset > 10) {
      setState(() {
        _appBarVisible = true;
      });
    } else {
      setState(() {
        _appBarVisible = false;
      });
    }
  }

  @override
  void initState() {
    _scrollController.addListener(_onScroll);
    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: AnimatedOpacity(
          duration: const Duration(milliseconds: 200),
          opacity: _appBarVisible ? 1 : 0,
          child: const Text(
            "Movie List",
            style: TextStyle(color: Colors.black),
          ),
        ),
      ),
      body: Scrollbar(
        controller: _scrollController,
        child: SingleChildScrollView(
          controller: _scrollController,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text(
                'Movie List',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 40),
              ),
              Gaps.v32,
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  for (var item in listitem)
                    SizedBox(
                      height: 40,
                      child: Text(
                        item,
                        style: const TextStyle(fontSize: 20),
                      ),
                    )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

위 예시 코드는 Flutter 앱에서 Scrollbar와 ScrollController를 사용하여 스크롤 가능한 목록을 표시하고, AppBar의 가시성을 조정하는 예제입니다. 아래에서 코드의 주요 부분과 Scrollbar와 ScrollController의 사용법에 대해 자세히 설명하겠습니다.

  • final ScrollController _scrollController = ScrollController(); 
    ScrollController를 선언하고 초기화합니다.

  • _onScroll() 메서드
    스크롤 위치에 따라 AppBar의 가시성을 조정하는 콜백 메서드입니다.
    _scrollController.offset: 스크롤 위치를 가져오며 이 값은 스크롤이 발생할 때마다 변경됩니다.

  • initState() 메서드:
    위젯이 초기화될 때 호출되는 생명주기 메서드입니다.
    _scrollController의 리스너를 _onScroll 메서드로 등록합니다.

  • _scrollController.addListener(_onScroll)
     _scrollController에서 발생하는 스크롤 이벤트를 _onScroll 메서드와 연결합니다. 
    스크롤 위치가 변경될 때마다 _onScroll 메서드가 실행됩니다.

  • dispose() 메서드: 
    위젯이 제거될 때 호출되는 생명주기 메서드입니다. _scrollController를 해제합니다.

  • Scrollbar 위젯: 
    스크롤바를 추가합니다. 
    _scrollController를 사용하여 스크롤 위치를 동기화합니다.

  • SingleChildScrollView 위젯: 
    스크롤이 가능한 영역을 생성합니다. 
    스크롤이 필요한 경우 자식 위젯을 감싸고 스크롤을 지원합니다.

  • AnimatedOpacity 위젯: 
    투명도 애니메이션을 가지는 위젯입니다. 
    _appBarVisible 값을 기반으로 AppBar의 가시성을 애니메이션화하여 부드러운 페이드 인/아웃 효과를 제공합니다.

  • for (var item in listitem):
    listitem에 있는 각 항목을 반복하여 아래의 SizedBox를 생성합니다.
    주의사항: for문에 대괄호{ } 없이 사용

 

Scroll 동작에 이벤트를 발생할 때 필요한 것들을 정리해보자면
  1. Scrollbar 위젯으로 자식 위젯 감싸기
  2. ScrollController 생성
  3. Scrollbar controller: 속성에 ScrollController 연결
  4. initState() 에 ScrollController.addListener(사용할 메서드); 로 리스너와 사용할메서드 연결하기
  5. dispose로 화면이 종료될 때 ScrollController.dispos()로 리소스 해제하기
반응형