[flutter] DropdownButton 위젯으로 다중 선택 기능 구현하기

08 Dec 2023

flutter

Flutter 앱에서 DropdownButton 위젯을 사용하여 다중 선택 기능을 구현하려면 어떻게 할까요? 이번 포스트에서는 DropdownButton 위젯으로 다중 선택이 가능한 드롭다운 목록을 구현하는 방법에 대해 알아보겠습니다.

Step 1: DropdownButton 위젯 생성

먼저 DropdownButton 위젯을 생성합니다. 이 위젯을 사용하여 다중 선택이 가능한 드롭다운 목록을 만들 수 있습니다.

DropdownButtonFormField(
  items: _items.map((String value) {
    return DropdownMenuItem(
      value: value,
      child: Row(
        children: <Widget>[
          Checkbox(
            value: _selectedItems.contains(value),
            onChanged: (bool? newValue) {
              if (newValue != null && newValue) {
                setState(() {
                  _selectedItems.add(value);
                });
              } else {
                setState(() {
                  _selectedItems.remove(value);
                });
              }
            },
          ),
          Text(value),
        ],
      ),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      _selectedItems.add(newValue!);
    });
  },
  hint: Text('Select items'),
);

위 코드에서 _items는 드롭다운 목록에 표시될 항목들의 리스트이고, _selectedItems는 사용자가 선택한 항목들을 저장하는 리스트입니다.

Step 2: 선택한 항목 표시

다음으로 선택한 항목을 어떻게 표시할지 정해야 합니다. 선택한 항목들을 보여주기 위해 다른 위젯을 사용하거나, 드롭다운 버튼 아래에 텍스트로 보여줄 수 있습니다.

Text('Selected items: ${_selectedItems.join(', ')}'),

Step 3: 다중 선택 로직 추가

마지막으로, 선택한 항목들을 관리하고 업데이트하는 로직을 작성해야 합니다. 위에서 보여준 코드에서는 Checkbox 위젯을 사용하여 각 항목의 다중 선택 기능을 구현하고, 필요에 따라 리스트를 업데이트합니다.

이제 여러분의 Flutter 앱에 DropdownButton을 사용하여 다중 선택 기능을 구현하는 기본적인 방법을 알게 되었습니다. 이를 응용하여 UI/UX를 더욱 향상시킬 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참고하세요.

이상으로, DropdownButton 위젯으로 다중 선택 기능을 구현하는 방법에 대해 알아보았습니다. 감사합니다!