36. [Flutter] ListWheelScrollView 회전하는 리스트뷰 만들기

ListWheelScrollView

ListWheelScrollView 위젯은 Flutter에서 사용자에게 원하는 항목을 선택할 수 있는 회전 목록을 만드는 데 사용되는 위젯 중 하나입니다. 이 위젯은 원형 목록을 나타내며, 사용자가 항목을 회전하고 선택할 수 있게 해줍니다. 주로 선택 목록, 설정 또는 날짜 및 시간 선택과 같은 사용자 상호 작용 요소를 구현할 때 사용됩니다.

• itemExtent: 항목의 크기를 지정하는 속성입니다. 모든 항목은 동일한 크기여야 합니다.
• children: ListWheelScrollView에 표시할 항목을 정의하는 위젯 목록입니다.
• controller: 스크롤 위치를 제어하는데 사용되는 FixedExtentScrollController를 지정합니다.
• magnification: 항목을 선택할 때 확대하는 정도를 나타내는 배수입니다. 값이 클수록 더 많이 확대됩니다.
• useMagnifier: 항목을 선택할 때 확대 도구를 사용할지 여부를 나타냅니다. true로 설정하면 확대 도구가 활성화됩니다.
• offAxisFraction: 선택된 항목과 다른 항목 간의 각도를 나타냅니다. 0.0은 항목을 수평으로 정렬하고 1.0은 항목을 수직으로 정렬합니다.
• perspective: 3D 효과의 원근을 나타냅니다. 값이 낮을수록 효과가 미미해집니다.
• onSelectedItemChanged: 선택한 항목이 변경될 때 호출되는 콜백 함수를 지정합니다. 선택한 항목의 인덱스가 인수로 전달됩니다.

ListWheelScrollView 위젯은 대화형 목록 또는 설정을 제공하거나, 날짜 및 시간 선택과 같은 원형 값을 표시하는 데 유용합니다. 사용자 지정 레이아웃 및 스타일을 구성할 수 있으며, 스크롤 동작을 통해 원하는 항목을 선택할 수 있도록 해줍니다.

---

예시.

import 'package:flutter/material.dart';

class TestScreen extends StatefulWidget {
  const TestScreen({super.key});

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListWheelScrollView(
          perspective: 0.005,
          useMagnifier: true,
          magnification: 2,
          offAxisFraction: 0.9,
          itemExtent: 100,
          children: [
            for (int i = 0; i < 10; i++)
              Container(
                color: Colors.indigo.shade400,
                alignment: Alignment.center,
                child: Text('$i'),
              )
          ]),
    );
  }
}

설명.

주어진 코드는 ListWheelScrollView를 사용하여 스크롤 가능한 원형 목록을 만드는 Flutter 앱 화면을 구성하는 예제입니다. 이 목록은 숫자를 나타내며, ListWheelScrollView 위젯의 다양한 속성을 사용하여 커스텀 스타일 및 스크롤 동작을 구성합니다.

• Scaffold: Scaffold 위젯은 앱의 기본 스켈레톤을 제공합니다. 화면의 기본 구조를 정의하는 데 사용됩니다.
  
  
• ListWheelScrollView: ListWheelScrollView는 스크롤 가능한 원형 목록을 생성합니다.
  itemExtent는 각 항목의 높이를 지정합니다. 이 예제에서는 100으로 설정되어 모든 항목의 높이가 100입니다.
  children에는 목록의 항목이 포함됩니다. for 루프를 사용하여 0에서 9까지의 숫자를 가진 컨테이너가 생성됩니다. 각 컨테이너는 다른 배경 색상과 텍스트를 가지며 숫자를 나타냅니다.
• perspective는 3D 효과의 원근을 지정합니다. 이 값이 낮을수록 효과가 미미해집니다.
• useMagnifier는 항목 선택 시 확대 도구를 사용할지 여부를 나타내며, magnification은 도구의 확대 비율을 설정합니다.
• offAxisFraction은 선택된 항목과 다른 항목 간의 각도를 나타냅니다. 0.0은 항목을 수평으로 정렬하고 1.0은 항목을 수직으로 정렬합니다.

이 코드를 실행하면 사용자가 원형 목록을 스크롤하고 항목을 선택할 수 있습니다. 선택한 항목은 확대되며, 항목 간의 3D 효과가 적용됩니다. 이 코드는 리스트 선택 목록의 모양을 사용자 정의하고 특수 효과를 적용하는 방법을 보여줍니다.