플러터 앱을 개발할 때 화면에 수평으로 스크롤이 필요한 경우가 있습니다. 이때, 사용자가 현재 위치를 파악하고 스크롤 위치를 조절할 수 있도록 수평 스크롤바를 구현할 수 있습니다. 이 글에서는 플러터에서 수평 스크롤바를 구현하는 방법에 대해 알아보겠습니다.

1. 스크롤 가능한 위젯 생성

먼저, 수평 스크롤바를 적용할 위젯을 생성해야 합니다. ListView, GridView 또는 SingleChildScrollView 등의 위젯을 사용하여 스크롤이 가능한 화면을 만들어줍니다.

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: <Widget>[
      // 수평으로 스크롤될 컨텐츠들을 추가해주세요
    ],
  ),
)

2. 스크롤바 추가

위젯을 스크롤 가능하게 만들었으면, 이제 수평 스크롤바를 추가해보겠습니다. CupertinoScrollbar 위젯을 사용하여 iOS 스타일의 스크롤바를 구현할 수 있습니다.

CupertinoScrollbar(
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      children: <Widget>[
        // 수평으로 스크롤될 컨텐츠들을 추가해주세요
      ],
    ),
  ),
)

이렇게 하면 스크롤 바가 나타나면서 사용자가 현재 어느 위치에 있는지 파악할 수 있게 됩니다.

3. 커스텀 스크롤바 구현

만약 기본 스타일의 스크롤바가 아닌 커스텀한 디자인의 스크롤바를 원한다면, Scrollbar 위젯과 ScrollbarPainter 클래스를 사용하여 스크롤바를 직접 커스터마이징할 수 있습니다. 이 방법은 좀 더 복잡하지만 원하는 디자인의 스크롤바를 만들 수 있는 장점이 있습니다.

Scrollbar(
  isAlwaysShown: true,
  controller: _controller,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    controller: _controller,
    child: Row(
      children: <Widget>[
        // 수평으로 스크롤될 컨텐츠들을 추가해주세요
      ],
    ),
  ),
)

위와 같이 Scrollbar 위젯을 사용하고 스크롤 컨트롤러를 설정하여 원하는 스크롤바를 구현할 수 있습니다.

수평 스크롤바는 화면에 나타나는 컨텐츠가 너무 많아 화면에 모두 표시되지 않을 때 유용합니다. 개발하고 있는 앱의 디자인과 사용자 경험을 고려하여 적절한 수평 스크롤바를 구현해보세요.

참고 자료

• Flutter 공식 문서