[Flutter]ScrollBar

들어가며

스크롤링하는 페이지를 구성하는데, SingleChildScrollView를 이용해서 구축했죠? 이렇게 구축한 페이지는 하단으로 스크롤링하면서 내용을 볼 수 있습니다. 근데, 실제 모바일 앱에서는 우측에 스크롤바가 있는 것을 볼 수 있어요. 이 스크롤바는 어떻게 구현할 수 있을까요? 이번 포스팅은 스크롤바를 구현하는 법에 대해서 다루겠습니다.

환경 구성

스크롤바를 구현할것이기 때문에, ListView.builder를 통해서 임의의 아이템들을 생성해서, 스크롤 화면을 구성할겁니다. 구성된 환경은 아래와 같아요.

import 'package:flutter/material.dart';

class ScrollBarPage extends StatelessWidget {
  const ScrollBarPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScrollBar'),
      ),
      body: ListView.builder(
        itemCount: 50,
        itemBuilder: (context, index) => ListTile(
          title: Text('item : $index'),
        ),
      ),
    );
  }
}

현재 50개의 아이템이 ListTile위젯으로 생성되었습니다. 이제 스크롤바를 한번 만들어볼까요??

ScrollBar

ScrollBar를 구현하려면 ScrollController가 필요합니다. controller를 생성하고, 사용이 끝나면 메모리에서 지워야겠죠? 그래서 Stateful Widget으로 바꿔줄겁니다.

...
class _ScrollBarPageState extends State<ScrollBarPage> {
  late ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
  }

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

이렇게 controller를 생성하고, 사용이 끝나면 지우는 것이 쓸대없는 메모리 차지를 줄일 수 있어요. 이제 적용시키면 됩니다. 생성한 controller를 사용하기 위해서는 scrollBar를 사용할 부분 전체를 Scrollbar로 감싸야 해요.

...
 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScrollBar'),
      ),
      body: Scrollbar(
        controller: _scrollController,//여기도 전달
        child: ListView.builder(
          controller: _scrollController,//여기도 전달
          itemCount: 50,
          ...

이제 controller도 전달했으니, 핫리로드 시켜보겠습니다 !

우측에 스크롤바가 생겼습니다! 이제 스크롤바를 당겨서 화면을 위아래로 스크롤 할 수 있어요!