[flutter] 스크롤바를 사용하여 텍스트 목록 구현하기

11 Dec 2023

flutter

스크롤바는 텍스트 목록이 길어질 때 사용자가 목록을 스크롤하고 위치를 파악할 수 있도록 도와주는 유용한 UI 요소입니다. Flutter에서는 ListView나 SingleChildScrollView와 함께 스크롤바를 사용하여 이를 구현할 수 있습니다.

1. ListView에 스크롤바 추가하기

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('스크롤바 예시'),
        ),
        body: Scrollbar(
          child: ListView.builder(
            itemCount: 100,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('아이템 $index'),
              );
            },
          ),
        ),
      ),
    );
  }
}

위 코드에서 Scrollbar를 ListView의 부모로 두어 ListView가 스크롤되는 동안 스크롤바를 표시합니다.

2. SingleChildScrollView에 스크롤바 추가하기

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('스크롤바 예시'),
        ),
        body: Scrollbar(
          child: SingleChildScrollView(
            child: Column(
              children: List.generate(100, (index) {
                return ListTile(title: Text('아이템 $index'));
              }),
            ),
          ),
        ),
      ),
    );
  }
}

SingleChildScrollView의 경우에도 Scrollbar를 사용하여 SingleChildScrollView의 부모로 두어 스크롤바를 표시할 수 있습니다.

위의 두 예제를 참고하여 리스트가 길어질 때 스크롤바를 추가하여 텍스트 목록을 구현해 보세요.

더 자세한 내용은 Flutter 공식 문서를 참고할 수 있습니다.