Flutter 앱을 개발하는 도중 DropdownButton 위젯을 사용하여 사용자가 목록에서 항목을 선택할 수 있도록 했다고 가정해보겠습니다. 하지만 DropdownButton 위젯은 기본적으로 텍스트 항목만 허용합니다. 따라서 DropdownButton의 아이템에 위젯을 추가하여 사용자 정의된 항목을 표시하고자 할 때가 있을 것입니다. 이 기능을 구현하는 방법에 대해 알아보겠습니다.

DropdownButton 위젯의 아이템에 전용 위젯 추가하기

DropdownButton 위젯의 아이템으로 전용 위젯을 추가하려면 DropdownMenuItem 위젯을 사용해야 합니다. DropdownMenuItem 위젯은 DropdownButton 위젯의 항목을 정의하는 데 사용됩니다.

DropdownButton(
  value: selectedValue,
  items: items.map((item) {
    return DropdownMenuItem(
      value: item,
      child: CustomWidget(item),
    );
  }).toList(),
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)

위 예제에서 CustomWidget은 각 DropdownMenuItem에 표시되는 사용자 정의 위젯을 나타냅니다. DropdownMenuItem의 child 속성에 사용자 정의 위젯을 지정하여 DropdownButton에서 각 항목에 해당하는 사용자 정의 위젯이 표시될 수 있도록 할 수 있습니다.

결론

이제 DropdownButton 위젯의 아이템에 전용 위젯을 추가하는 방법을 알게 되었습니다. DropdownMenuItem을 사용하여 각 항목에 해당하는 사용자 정의 위젯을 표시할 수 있습니다.

이를 통해 DropdownButton 위젯을 더 다양하고 맞춤화된 방식으로 사용할 수 있게 되었습니다.

참고 문서:

• Flutter DropdownButton class
• Flutter DropdownMenuItem class