DropdownButton은 사용자가 항목을 선택할 수 있는 드롭다운 목록을 제공하는 Flutter 위젯입니다. DropdownButton를 다른 위젯과 함께 사용하여 사용자 경험을 향상시킬 수 있습니다. 이 글에서는 DropdownButton와 함께 유용하게 사용할 수 있는 다른 몇 가지 위젯을 살펴보겠습니다.
1. ListTile
ListTile은 목록 항목을 표시하기 위한 Flutter의 내장 위젯입니다. DropdownButton을 ListTile과 함께 사용하면 사용자에게 선택 가능한 항목들을 시각적으로 표시할 수 있습니다. ListTile은 각 항목에 아이콘, 제목 및 부제목을 표시할 수 있는 기능을 제공하여 DropdownButton의 레이아웃을 풍부하게 만들어줍니다.
DropdownButton<String>(
value: _selectedItem,
items: _dropdownItems.map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new ListTile(
title: new Text(value),
leading: new Icon(Icons.details),
),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
_selectedItem = newValue;
});
},
)
2. PopupMenuButton
PopupMenuButton은 다른 작업을 수행할 수 있는 팝업 메뉴를 표시하는 버튼입니다. DropdownButton과 함께 사용하면 선택 가능한 항목들을 팝업 형태로 제공할 수 있습니다. 예를 들어, DropdownButton을 메인 앱 툴바에 표시하고 PopupMenuButton를 사용하여 더 많은 옵션을 제공할 수 있습니다.
PopupMenuButton<String>(
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
const PopupMenuItem<String>(
value: 'option1',
child: Text('Option 1'),
),
const PopupMenuItem<String>(
value: 'option2',
child: Text('Option 2'),
),
const PopupMenuItem<String>(
value: 'option3',
child: Text('Option 3'),
),
],
// ...
)
3. Wrap
Wrap은 하위 위젯들을 세로 또는 가로로 배열할 수 있는 유용한 위젯입니다. DropdownButton의 크기가 작고 선택 가능한 항목의 수가 많은 경우, Wrap을 사용하여 여러 항목을 한 줄에 표시하고 넘치는 항목은 다음 줄로 이동하도록 할 수 있습니다.
Wrap(
children: _dropdownItems.map((String value) {
return new Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
child: new ChoiceChip(
label: new Text(value),
selected: _selectedItem == value,
onSelected: (bool selected) {
setState(() {
_selectedItem = selected ? value : null;
});
},
),
);
}).toList(),
)
이러한 위젯들을 DropdownButton과 함께 사용하여 다양한 사용자 경험을 제공할 수 있습니다. DropdownButton를 다른 위젯과 조합하여 앱의 기능을 보다 다양하고 유연하게 만들어보세요.
Flutter 공식 문서 - DropdownButton