[flutter] 플러터에서의 왼쪽 정렬 스크롤바 구현하기

11 Dec 2023

flutter

플러터에서 UI를 설계할 때 스크롤뷰에 수평 스크롤바를 왼쪽에 위치시키는 방법을 알아보겠습니다.

수평 스크롤뷰 생성

가로 스크롤뷰를 만들기 위해 ListView나 SingleChildScrollView 위젯을 사용합니다.

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      // 가로로 스크롤 될 컨텐츠들을 추가
    ],
  ),
)

왼쪽 정렬 스크롤바 추가

이 스크롤뷰에 수평 스크롤바를 왼쪽에 위치시키려면 CustomScrollView 위젯을 사용합니다.

CustomScrollView(
  physics: const AlwaysScrollableScrollPhysics(),
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildListDelegate(
        [
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            reverse: true, // 스크롤 방향을 반대로 설정
            child: Row(
              children: [
                // 가로로 스크롤 될 컨텐츠들을 추가
              ],
            ),
          ),
        ],
      ),
    ),
  ],
)

이제 왼쪽 정렬 스크롤바를 플러터 앱에서 쉽게 구현할 수 있습니다. 만약 위 코드를 적용해도 스크롤바가 올바르게 동작하지 않는다면, physics 속성을 조정하여 해결할 수 있습니다.

참고문헌: