[flutter] DropdownButton 위젯의 아이템에 뱃지 추가하기

08 Dec 2023

flutter

Flutter 앱을 개발할 때 DropdownButton 위젯은 사용자가 여러 옵션 중 하나를 선택할 수 있도록 하는데 유용합니다. 기본적으로 DropdownButton의 아이템은 텍스트로 표시됩니다. 하지만 때로는 이 텍스트 외에도 각 아이템에 추가 정보를 표시해야 하는 경우가 있습니다. 이를 해결하기 위해서는 DropdownButton의 아이템에 뱃지를 추가할 수 있습니다.

이 포스트에서는 Flutter에서 DropdownButton 위젯의 아이템에 뱃지를 어떻게 추가하는지 알아보겠습니다.

1. DropdownButton 위젯

DropdownButton 위젯은 DropdownMenuItem 목록 중에서 하나를 선택할 수 있는 드롭다운 버튼을 제공합니다. 각 DropdownMenuItem는 일반적으로 문자열 값을 포함합니다.

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

위의 코드에서 DropdownButton 위젯은 문자열 값을 표시하는 DropdownMenuItem 목록을 가지고 있습니다.

2. DropdownButton 위젯의 아이템에 뱃지 추가하기

각 DropdownMenuItem에 추가 정보를 표시하려면 DropdownButton 위젯의 items 속성에 들어가는 DropdownMenuItem를 다르게 구성해야 합니다. 뱃지를 추가하기 위해서는 DropdownMenuItem의 child 속성에 Row나 ListTile과 같은 위젯들을 이용하여 뱃지를 추가할 수 있습니다.

DropdownButton<String>(
  value: _selectedItem,
  onChanged: (String? newValue) {
    setState(() {
      _selectedItem = newValue!;
    });
  },
  items: <DropdownMenuItem<String>>[
    DropdownMenuItem<String>(
      value: 'Option 1',
      child: Row(
        children: <Widget>[
          SizedBox(
            width: 50,
            child: Icon(Icons.star, color: Colors.yellow),
          ),
          Text('Option 1'),
        ],
      ),
    ),
    DropdownMenuItem<String>(
      value: 'Option 2',
      child: ListTile(
        leading: Icon(Icons.circle, color: Colors.blue),
        title: Text('Option 2'),
      ),
    ),
    ...
  ],
)

위의 코드에서 첫 번째 DropdownMenuItem에는 Row 위젯을 사용하여 아이콘과 텍스트를 함께 표시하고, 두 번째 DropdownMenuItem에는 ListTile 위젯을 활용하여 아이콘을 왼쪽에, 텍스트를 오른쪽에 표시하는 방법을 보여줍니다.

이제 DropdownButton 위젯을 통해 각 아이템에 뱃지를 추가하는 방법을 알게 되었습니다. 이를 통해 사용자가 추가 정보를 쉽게 확인할 수 있도록 할 수 있습니다.

더 많은 방법과 유용한 기능을 알아보려면 공식 Flutter 문서를 참고해보세요.

Happy coding!