[flutter] 스크롤바를 사용하여 리스트뷰 구현하기

11 Dec 2023

flutter

Flutter 앱에서 긴 목록을 표시할 때 스크롤바를 추가하면 사용자가 더 쉽게 이동할 수 있습니다. 이 기사에서는 Flutter에서 ListView에 수직 스크롤바를 추가하는 방법을 알아보겠습니다.

패키지 추가

먼저, ListView에 수직 스크롤바를 추가하기 위해 cupertino_icons 패키지를 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

이후 터미널에서 다음 명령을 실행하여 패키지를 다운로드합니다.

flutter pub get

리스트뷰에 스크롤바 추가하기

ListView에 스크롤바를 추가하는 가장 간단한 방법은 Scrollbar 위젯을 사용하는 것입니다. 아래는 ListView에 수직 스크롤바를 추가하는 예제 코드입니다.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino_icons.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scrollable ListView'),
        ),
        body: Scrollbar(
          child: ListView.builder(
            itemCount: 100,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
        ),
      ),
    );
  }
}

위 예제 코드에서 Scrollbar 위젯은 ListView를 감싸고 있으며, 이를 통해 ListView에 수직 스크롤바를 추가할 수 있습니다.

정리

이제 여러분은 Flutter에서 ListView에 스크롤바를 추가하는 방법을 알게 되었습니다. 사용자 경험을 향상시키기 위해 앱에 스크롤바를 추가해 보세요!

더 많은 Flutter 팁과 튜토리얼은 Flutter 공식 웹사이트에서 확인할 수 있습니다.