[flutter] DropdownButton 위젯의 아이템에 서브텍스트 추가하기

08 Dec 2023

flutter

Flutter의 DropdownButton은 사용자가 선택할 수 있는 옵션 목록을 제공하는데 사용됩니다. 기본적으로 DropdownButton은 각 항목에 대한 텍스트만 표시합니다. 하지만 때로는 이 항목들에 추가 정보를 제공하는 것이 유용할 수 있습니다. 이 포스트에서는 DropdownButton 위젯의 각 항목에 서브텍스트를 추가하는 방법을 알아봅니다.

1. DropdownMenuItem의 child 수정

DropdownButton 위젯을 구성할 때, DropdownMenuItem들을 생성합니다. 이때 DropdownMenuItem의 child 속성을 수정하여 각 항목에 대한 서브텍스트를 추가할 수 있습니다.

예를들어, 다음 코드는 DropdownButton에 항목과 서브텍스트를 추가하는 방법을 보여줍니다.

String selectedOption;

List<String> options = ['Option 1', 'Option 2', 'Option 3'];

DropdownButton(
  value: selectedOption,
  items: options.map((option) {
    return DropdownMenuItem(
      value: option,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(option, style: TextStyle(fontSize: 18)),
          Text('Description for $option', style: TextStyle(fontSize: 12, color: Colors.grey)),
        ],
      ),
    );
  }).toList(),
  onChanged: (newOption) {
    setState(() {
      selectedOption = newOption;
    });
  },
)

위의 예제에서, DropdownMenuItem의 child로 Column 위젯을 사용하여 원하는 서브텍스트를 추가하였습니다.

이제 DropdownButton을 구성할 때 각 항목에 서브텍스트를 추가하는 방법을 알게되었습니다. 필요에 따라 위의 예제를 활용하여 DropdownButton을 보다 맞춤화하여 사용할 수 있습니다.

1. DropdownMenuItem의 child 수정

참고 자료