앱 개발 중 카테고리 리스트를 표시하는 경우가 많습니다. 사용자 경험을 향상시키기 위해 이러한 리스트에 스크롤바를 추가하면 유용합니다. 이번 포스트에서는 Flutter에서 카테고리 리스트에 스크롤바를 추가하는 방법을 알아보겠습니다.

ListView와 Scrollbar 위젯 사용

Flutter에서 스크롤바를 사용하여 카테고리 리스트를 만들려면 ListView와 Scrollbar 위젯을 사용해야 합니다. ListView는 스크롤 가능한 목록을 만들기 위한 가장 일반적인 방법이며, Scrollbar는 스크롤 위치를 시각적으로 보여주는 데 사용됩니다.

import 'package:flutter/material.dart';

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

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

위 예제에서는 Scrollbar 위젯으로 ListView를 감싼 후, ListView.builder를 사용하여 각 카테고리를 ListTile로 표시하고 있습니다.

스크롤바 색상 변경하기

스크롤바의 색상을 변경하려면 Scrollbar 위젯의 isAlwaysShown 및 showTrackOnHover 속성을 활용할 수 있습니다. 또한, 스크롤바의 색상을 ThemeData에서 지정한 primaryColor로 변경할 수 있습니다.

Scrollbar(
  isAlwaysShown: true,
  showTrackOnHover: true,
  child: ListView.builder(
    itemCount: 50,
    itemBuilder: (BuildContext context, int index) {
      return ListTile(
        title: Text('Category $index'),
      );
    },
  ),
)

이제 위젯을 실행하면 스크롤바가 항상 표시되고, 컨테이너 위에 마우스를 올리면 스크롤바가 나타날 것입니다. 또한, ThemeData에서 primaryColor를 변경하면 스크롤바의 색상이 변경될 것입니다.

마치며

Flutter에서 Scrollbar를 사용하여 카테고리 리스트에 스크롤바를 추가하는 방법을 알아보았습니다. 스크롤바를 활용하여 사용자가 빠르고 쉽게 카테고리를 찾을 수 있도록 도와줄 수 있습니다. 앱의 사용자 경험을 향상시키기 위해 스크롤바를 적극 활용해보세요.