Flutter ListWheelScrollView: 3D 회전 효과로 인터랙티브한 리스트 구현하기

Flutter는 앱에 독특한 사용자 경험을 더할 수 있는 다양한 위젯을 제공합니다. 그중에서도 ListWheelScrollView는 사용자가 마치 회전하는 바퀴를 돌리듯, 3D 회전 효과로 리스트를 스크롤할 수 있게 해주는 위젯입니다. ListWheelScrollView를 사용하면 재미있고 인터랙티브한 리스트 UI를 쉽게 구현할 수 있습니다. 이 글에서는 ListWheelScrollView의 기본적인 사용법, 옵션들, 실제 활용 예시를 통해 앱 개발에 도움을 줄 수 있는 방법을 알아보겠습니다.

---

1. ListWheelScrollView란?

ListWheelScrollView는 Flutter에서 제공하는 3D 스크롤 리스트 위젯입니다. 일반적인 리스트 스크롤 방식이 아닌 휠 형태로 스크롤하여, 사용자에게 독특한 시각적 효과를 제공합니다. 이 위젯은 회전하는 메뉴, 선택 목록, 슬라이드쇼, 날짜 선택기 등 다양한 목적으로 활용할 수 있어 특히 인터랙티브한 UI를 구현할 때 유용합니다.

이 위젯의 가장 큰 장점은 스크롤에 따라 요소들이 입체적으로 회전하는 것처럼 보인다는 점입니다. 기본적인 리스트 뷰와는 다른 독특한 사용자 경험을 원하는 경우 ListWheelScrollView가 좋은 선택이 될 수 있습니다.

2. ListWheelScrollView의 주요 매개변수와 구조

ListWheelScrollView는 다른 리스트 위젯처럼 children이나 itemBuilder로 항목을 정의할 수 있으며, 이를 통해 동적으로 콘텐츠를 생성할 수 있습니다. 주요 매개변수는 아래와 같습니다.

• children: 리스트에 표시할 위젯 목록입니다.
• itemExtent: 각 항목의 높이입니다. 모든 항목이 동일한 높이를 가지므로, 일정한 높이 값을 지정해주어야 합니다.
• diameterRatio: 리스트 휠의 곡률을 결정합니다. 기본값은 2.0이며, 값이 작을수록 곡률이 커집니다.
• offAxisFraction: 휠의 가로 위치를 조절하는 매개변수입니다. 중앙에서 벗어난 위치에 휠을 배치하고자 할 때 유용합니다.
• magnification: 스크롤의 중앙에 위치한 항목을 확대하여 강조할 때 사용됩니다.
• useMagnifier: 중앙 항목 확대 효과를 사용할지 여부를 결정합니다.
• perspective: 시점 각도를 설정하는 매개변수로, 회전 효과를 얼마나 깊게 줄지 결정합니다.

이제, ListWheelScrollView의 기본적인 예제를 통해 구조를 이해해보겠습니다.

ListWheelScrollView(
  itemExtent: 60.0,
  diameterRatio: 1.5,
  perspective: 0.003,
  children: List.generate(
    10,
    (index) => Container(
      alignment: Alignment.center,
      color: Colors.blueAccent,
      child: Text(
        'Item $index',
        style: TextStyle(fontSize: 20, color: Colors.white),
      ),
    ),
  ),
)

위 예제에서는 10개의 아이템을 생성하여 휠에 추가하였으며, 각 아이템의 높이는 60.0으로 설정했습니다. diameterRatio와 perspective 값을 통해 리스트의 휠 곡률과 깊이를 설정하여 독특한 3D 스크롤 효과를 구현할 수 있습니다.

3. ListWheelScrollView의 주요 사용법

1)일반 리스트 구현하기

기본적으로 ListWheelScrollView에 여러 아이템을 추가하여 3D 리스트를 구현할 수 있습니다. 예를 들어, 메뉴나 리스트 항목을 순서대로 표시하고자 할 때 유용하게 사용할 수 있습니다.

ListWheelScrollView(
  itemExtent: 70,
  children: List.generate(
    5,
    (index) => Container(
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.teal[300 + index * 100],
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(
        'Option $index',
        style: TextStyle(fontSize: 18, color: Colors.white),
      ),
    ),
  ),
)

위 예제에서는 총 5개의 아이템이 포함된 메뉴를 생성했습니다. 각 항목이 3D 스크롤 리스트로 표시되며, itemExtent로 항목 높이를 지정하여 깔끔하게 정렬했습니다.

2)날짜 선택기 구현하기

ListWheelScrollView는 날짜 선택기와 같이 선택을 요하는 UI에도 잘 어울립니다. 날짜나 시간을 순서대로 정렬하여 스크롤할 수 있어, 사용자에게 친숙하고 편리한 인터페이스를 제공할 수 있습니다.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    SizedBox(
      width: 100,
      child: ListWheelScrollView.useDelegate(
        itemExtent: 50,
        physics: FixedExtentScrollPhysics(),
        childDelegate: ListWheelChildLoopingListDelegate(
          children: List.generate(
            12,
            (index) => Center(
              child: Text(
                '${index + 1}월',
                style: TextStyle(fontSize: 24),
              ),
            ),
          ),
        ),
      ),
    ),
    SizedBox(
      width: 100,
      child: ListWheelScrollView.useDelegate(
        itemExtent: 50,
        physics: FixedExtentScrollPhysics(),
        childDelegate: ListWheelChildLoopingListDelegate(
          children: List.generate(
            31,
            (index) => Center(
              child: Text(
                '${index + 1}일',
                style: TextStyle(fontSize: 24),
              ),
            ),
          ),
        ),
      ),
    ),
  ],
)

이 예제는 두 개의 ListWheelScrollView를 가로로 배치하여 날짜를 선택하는 UI를 구현한 것입니다. 월과 일을 선택할 수 있도록 ListWheelChildLoopingListDelegate를 사용하여 반복 스크롤이 가능하게 했습니다.

4. ListWheelScrollView의 주요 매개변수와 활용법

1. diameterRatio: 곡률을 조절하여 휠의 깊이감을 다르게 할 수 있습니다. 기본값은 2.0인데, 값이 작을수록 휠의 곡률이 커지며 독특한 회전 효과가 나타납니다.
2. magnification 및 useMagnifier: 리스트의 중앙에 위치한 항목을 확대하여 강조할 때 유용합니다. 예를 들어, 선택된 항목을 강조 표시하고자 할 때 효과적입니다.
3. offAxisFraction: 휠을 좌우로 이동시켜 중앙에서 벗어나게 배치하고자 할 때 사용하는 옵션입니다. 좌우에 스크롤 휠을 배치하고 싶을 때 유용하게 사용할 수 있습니다.
4. perspective: 시점 깊이를 설정하여 휠의 3D 효과를 조절할 수 있습니다. 값이 클수록 회전 효과가 강하게 나타납니다.

5. ListWheelScrollView 사용 시 주의사항

• 복잡한 위젯 사용에 주의: ListWheelScrollView는 시각적 효과가 강한 위젯이므로, 많은 양의 데이터나 복잡한 레이아웃을 포함할 경우 성능 저하가 발생할 수 있습니다.
• 고정된 높이 사용: itemExtent로 모든 아이템의 높이를 동일하게 설정해야 합니다. 불규칙한 높이의 아이템이 필요할 경우 ListWheelScrollView는 적합하지 않을 수 있습니다.

6. 결론

Flutter의 ListWheelScrollView는 3D 회전 효과를 통해 일반 리스트와는 차별화된 사용자 경험을 제공합니다. 특히 선택 목록, 메뉴, 날짜 선택기 등 다양한 용도로 활용 가능하며, 앱의 인터페이스를 더욱 흥미롭게 만들 수 있습니다. ListWheelScrollView의 주요 옵션을 적절히 활용하고, 앱의 사용자 경험을 개선하는 도구로 사용해 보세요.