[flutter] 플러터에서의 다이얼 설정을 스크롤바로 구현하기

11 Dec 2023

flutter

플러터에서 다이얼 설정(또는 스피너)을 스크롤바를 사용하여 구현하는 방법은 매우 간단합니다. 일반적으로, 스피너 위젯은 사용자가 선택할 수 있는 여러 옵션을 포함하며, 선택한 옵션을 표시하는데 많이 사용됩니다. 이를 스크롤바로 대체하기 위해서는 ListView 위젯을 사용합니다.

1. ListView 사용하기

ListView.builder(
  scrollDirection: Axis.vertical, // 수직 스크롤
  itemCount: _options.length, // 옵션의 개수에 따라서 아이템 개수 지정
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(_options[index]), // 옵션 표시
      onTap: () {
        // 옵션 선택 로직 구현
      },
    );
  },
)

위 예제에서 _options는 사용 가능한 옵션들의 리스트를 나타냅니다. ListView.builder 위젯은 스크롤 가능한 리스트를 만들 수 있도록 도와줍니다. ListView의 scrollDirection 속성을 이용하여 수직으로 스크롤할 수 있도록 설정할 수 있습니다.

2. 스크롤바 추가하기

스크롤바를 추가하여 사용자가 리스트를 스크롤할 수 있도록 하려면, 단순히 Scrollbar 위젯을 ListView의 인자로 추가하고 controller 속성을 지정하여 사용하면 됩니다.

Scrollbar(
  isAlwaysShown: true, // 항상 스크롤바 표시
  controller: _scrollController,
  child: ListView.builder(
    controller: _scrollController, // 스크롤 컨트롤러 지정
    scrollDirection: Axis.vertical,
    itemCount: _options.length,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(_options[index]),
        onTap: () {
          // 옵션 선택 로직 구현
        },
      );
    },
  ),
)

위의 예제에서 _scrollController는 스크롤바와 리스트의 스크롤을 제어하는 데 사용됩니다.

이렇게 구현하면 플러터에서 다이얼 설정을 스크롤바로 간단히 구현할 수 있습니다. 이 방법을 사용하여 사용자가 여러 옵션 중 하나를 선택하는 UI를 만들 수 있습니다.