ListWheelScrollView

import 'package:flutter/material.dart';

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Settings'),
        ),
        body: ListWheelScrollView(
          diameterRatio: 1.5,
          offAxisFraction: 1.5,
          itemExtent: 200,
          children: [
            for (var x in [1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1])
              FractionallySizedBox(
                widthFactor: 1,
                child: Container(
                  color: Colors.teal,
                  alignment: Alignment.center,
                  child: const Text(
                    'Pick me',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 39,
                    ),
                  ),
                ),
              )
          ],
        ));
  }
}

ListWheelScrollView는 Flutter에서 제공하는 특별한 종류의 스크롤 뷰입니다. 일반적인 리스트보다는 휠 또는 회전판 같은 느낌의 UI를 구현하고자 할 때 주로 사용됩니다. 이 위젯을 사용하면 중앙에 위치한 항목이 크게 표시되고 양쪽으로 멀어질수록 항목이 작아지는 3D 효과를 쉽게 구현할 수 있습니다.

주요 속성:

1. diameterRatio: 중앙에 위치한 항목과 휠의 크기 비율을 결정합니다. 값이 크면 항목들이 더 평평하게 보이며, 값이 작으면 더욱 커브된 형태로 보입니다.
2. offAxisFraction: 현재 선택된 항목이 얼마나 오프셋 되어 보일지 결정합니다. 양수 값은 선택된 항목이 오른쪽으로, 음수 값은 왼쪽으로 이동하게 합니다.
3. itemExtent: 각 항목의 크기(높이)를 정의합니다.
4. children: 화면에 표시될 항목들의 리스트입니다.

코드 설명:

• AppBar: 'Settings'라는 제목을 갖는 AppBar를 보여줍니다.
• ListWheelScrollView: 중앙에 위치한 항목이 크게 보이도록 하는 회전판 스타일의 스크롤 뷰를 구성합니다.
  • diameterRatio가 1.5로 설정되어, 회전판의 커브가 약간 평평하게 설정되었습니다.
  • offAxisFraction이 1.5로 설정되어, 선택된 항목이 오른쪽으로 크게 이동합니다.
  • itemExtent는 각 항목의 높이를 200으로 설정합니다.
• for loop: for 루프를 사용하여 동일한 항목을 여러 번 생성합니다. 각 항목은 테일 색상의 컨테이너로, 중앙에 'Pick me'라는 텍스트가 포함되어 있습니다.

이 ListWheelScrollView는 사용자가 휠을 회전시킬 때 중앙에 위치하는 항목이 강조되는 데 사용되는 주요 위젯입니다. 그래픽 효과와 사용성 때문에 일반적인 리스트보다 선택적으로 사용됩니다. 예를 들어, 날짜나 시간을 선택하는 데 적합한 UI를 만들기 위해 사용될 수 있습니다.