[flutter] DropdownButton 위젯과 함께 사용하는 토글 버튼

08 Dec 2023

flutter

Flutter에서 DropdownButton을 사용하여 사용자가 선택한 옵션을 제공하는 것은 매우 일반적입니다. 그러나 때때로 DropdownButton을 토글 버튼과 함께 사용하여 사용자가 선택한 항목을 보이거나 감출 수 있게 하는 기능이 필요할 수 있습니다. 이 포스트에서는 DropdownButton 위젯과 함께 사용하여 토글 기능을 추가하는 방법에 대해 알아보겠습니다.

DropdownButton 위젯 사용하기

DropdownButton 위젯을 사용하여 사용자에게 선택할 수 있는 옵션을 제공할 수 있습니다. 예를 들어, 다음과 같이 DropdownButton을 생성할 수 있습니다.

String dropdownValue = 'Option 1';

DropdownButton<String>(
  value: dropdownValue,
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
  items: <String>['Option 1', 'Option 2', 'Option 3', 'Option 4']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
)

DropdownButton과 토글 버튼 함께 사용하기

DropdownButton 위젯과 함께 사용하여 선택한 옵션을 토글 버튼으로 보이거나 감출 수 있습니다. 아래 예제는 DropdownButton을 토글 버튼으로 감싸고, 토글 버튼을 누르면 DropdownButton이 보이거나 감춰지도록 하는 예제입니다.

bool isDropdownOpened = false;

Row(
  children: [
    Expanded(
      child: Offstage(
        offstage: !isDropdownOpened,
        child: DropdownButton<String>(
          value: dropdownValue,
          onChanged: (String? newValue) {
            setState(() {
              dropdownValue = newValue!;
            });
          },
          items: <String>['Option 1', 'Option 2', 'Option 3', 'Option 4']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
    ),
    ElevatedButton(
      onPressed: () {
        setState(() {
          isDropdownOpened = !isDropdownOpened;
        });
      },
      child: Text('Toggle Dropdown'),
    ),
  ],
)

마치며

위의 예제에서는 Flutter의 DropdownButton 위젯과 토글 버튼을 함께 사용하여 DropdownButton을 토글할 수 있는 기능을 구현하는 방법을 살펴보았습니다. 이 기능은 사용자가 DropdownButton에서 선택한 옵션을 필요에 따라 간편하게 숨기거나 보여줄 수 있도록 합니다. DropdownButton의 유연한 기능을 활용하여 UX를 향상시킬 수 있습니다.

참고: Flutter DropdownButton 클래스 문서