플러터 ToggleButtons 요일 버튼 만들기 예제

Flutter에서 사용자에게 요일을 선택하도록 하려면 어떻게 해야 할까요? 이번 글에서는 플러터 ToggleButtons 위젯을 사용하여 사용자가 요일을 선택할 수 있는 간단한 방법에 대해 살펴보겠습니다. 이 기능은 사용자의 활동이나 알림을 설정하는 데 유용하게 사용할 수 있습니다.

ToggleButtons

Flutter의 `ToggleButtons` 위젯은 여러 선택지 중에서 하나 이상의 옵션을 선택하게 해주는 데 사용됩니다. 예를 들어, 요일을 선택하는 기능의 경우, 사용자가 월요일부터 일요일까지 원하는 요일을 선택할 수 있게 만들 수 있습니다.

1.ToggleButtons 위젯 설정

`ToggleButtons` 위젯을 사용하여 요일을 표시하고 사용자가 선택할 수 있게 하겠습니다. `daysSelected`는 각 요일이 선택되었는지 여부를 나타내는 bool 리스트입니다.

 List<bool> daysSelected = List.generate(7, (_) => false);
 ...
 ToggleButtons(
            isSelected: daysSelected,
            onPressed: (int index) {
              setState(() {
                daysSelected[index] = !daysSelected[index];
              });
            },
            children: <Widget>[
              Text('월'),
              Text('화'),
              Text('수'),
              Text('목'),
              Text('금'),
              Text('토'),
              Text('일'),
            ],
          ),

2. 선택된 요일을 문자열로 변환

사용자가 선택한 요일을 처리하거나 디스플레이하기 위해, 선택된 요일을 문자열로 변환하는 함수를 구현합니다.

String weekdayToString(List<bool> weekdayList) {
  List<String> days = ["월", "화", "수", "목", "금", "토", "일"]; // 한국어 요일 리스트

  // true 값에 해당하는 요일을 선택
  List<String> selectedDays = [];
  for (int i = 0; i < weekdayList.length; i++) {
    if (weekdayList[i]) {
      selectedDays.add(days[i]);
    }
  }
  return selectedDays.join(", ");
}

마무리

`ToggleButtons`를 활용하여 Flutter 앱에 간단하면서도 효과적인 요일 선택 기능을 추가할 수 있습니다. 사용자가 선택한 요일 정보는 다양한 용도로 활용할 수 있으며, 이를 통해 앱의 사용성을 한층 더 향상시킬 수 있습니다.