DropdownButton은 Flutter에서 사용자가 옵션을 선택할 수 있는 메뉴를 제공하는 위젯이다. 이 위젯을 사용하여 여러 항목 중 하나를 선택할 수 있게 해주는데, 때로는 DropdownButton의 항목으로 텍스트만 표시하는 것이 아니라 다른 위젯이나 복합적인 사용자 정의를 넣어야 할 때가 있다. 이를 위해 DropdownButton 위젯의 아이템에 다른 위젯을 포함하는 방법에 대해 알아보자.

DropdownButton의 아이템에 다른 위젯 포함하기

DropdownButton의 아이템으로 다른 위젯을 포함하는 방법은 간단하다. DropdownButton의 items 프로퍼티에 DropdownMenuItem 위젯을 사용하여 다양한 형태의 아이템을 추가할 수 있다. DropdownMenuItem은 child 프로퍼티를 이용하여 텍스트 또는 다른 위젯을 포함할 수 있다.

DropdownButton<String>(
  value: _selectedItem,
  items: <DropdownMenuItem<String>>[
    DropdownMenuItem(
      value: 'item1',
      child: Text('Item 1'),
    ),
    DropdownMenuItem(
      value: 'item2',
      child: Row(
        children: <Widget>[
          Icon(Icons.star),
          SizedBox(width: 8),
          Text('Item 2'),
        ],
      ),
    ),
  ],
  onChanged: (String? value) {
    setState(() {
      _selectedItem = value!;
    });
  },
)

위의 예제에서 DropdownButton의 items에 DropdownMenuItem을 사용하여 각 아이템을 정의했다. 두 번째 DropdownMenuItem의 child로는 Row 위젯을 사용하여 별 모양의 아이콘과 텍스트를 함께 표시하도록 구성했다.

이와 같이 DropdownButton을 활용하여 다른 위젯을 포함한 다양한 형태의 아이템을 구성할 수 있다.

마무리

이렇게 DropdownButton 위젯의 아이템에 다른 위젯을 포함하는 방법에 대해 알아봤다. DropdownButton을 사용하여 사용자가 다양한 형태의 옵션을 선택하는 인터페이스를 구성할 때, 다른 위젯을 추가하여 보다 다채로운 디자인을 구현할 수 있다. 함께 활용하여 다양한 사용자 경험을 제공해보자.

Flutter DropdownButton documentation