Flutter/UI
[Flutter] DropdownButton , DropdownMenuItem
찌김이
2022. 9. 3. 06:00
728x90
반응형
여러 항목 중 하나를 선택하는 것을 구현할 때 쓰이는 DropDownButton 입니다.
간단 구현 방법
- DropDown 으로 선택된 값의 상태를 변경해주어야 하니 StatefulWidget 으로 만듭니다.
- DropDown 에 넣을 목록과 현재 선택값을 선언해주세요.
- initState 에서 현재 선택값을 목록의 첫번째 값으로 넣어줍니다.
final _cities = ['서울', '대전', '대구', '부산', '인천', '울산', '광주'];
String _selectedCity = '';
@override
void initState() {
super.initState();
setState(() {
_selectedCity = _cities[0];
});
}
- DropdownButton 을 구현합니다.
- value 는 현재 선택된 값입니다. 아까 선언한 _selectedCity 를 넣어줍니다.
- items 는 List<DropdownMenuItem> 를 넣어줍니다. _cities 를 map 을 이용하여 만들어주면 됩니다.
- onChanged 는 Dropdown 의 값이 변했을 때 DropdownMenuItem 의 value 를 반환합니다.
- onChanged 에서 현재 선택값의 상태 변경 처리를 하면 구현은 끝납니다.
DropdownButton(
value: _selectedCity,
items: _cities
.map((e) => DropdownMenuItem(
value: e, // 선택 시 onChanged 를 통해 반환할 value
child: Text(e),
))
.toList(),
onChanged: (value) { // items 의 DropdownMenuItem 의 value 반환
setState(() {
_selectedCity = value!;
});
},
)
DropdownButton 속성
1. icon
- DropdownButton 우측에 위치는 아이콘이며 관련 속성은 다음과 같습니다.
// Dropdown 우측 아이콘 변경
Widget? icon,
// onChanged 가 정의되지 않았을 때 아이콘 색상 - ex) onChanged : null
Color? iconDisabledColor,
// onChanged 가 정의되었을 때 활성 아이콘 색상
Color? iconEnabledColor,
// 아이콘 크기
double iconSize,
2. hint
- DropdownButton의 value 값이 null 일 때 나타나는 값으로 관련 속성은 다음과 같습니다.
// value 값이 null 일 때 보여줄 위젯
Widget? hint
// onChanged 가 null 일 때 보여줄 hint 위젯
Widget? disabledHint
// hint 정렬 위치
AlignmentGeometry alignment
3. dropdown
- DropdownButton 을 클릭해서 펼쳐졌을 때 이며 관련 속성은 다음과 같습니다.
// 그림자 굵기
int elevation,
// dropdown radius 조절
BorderRadius? borderRadius
// dropdown text style
TextStyle? style,
// dropdown 배경색
Color? dropdownColor,
// 제한 높이
double? menuMaxHeight
// menuItem 의 높이
double? itemHeight,
// dropdown 을 가로로 최대로 늘릴지 여부
bool isExpanded,
4. 기타
// dropdowmItem 을 직접 만듭니다.
DropdownButtonBuilder? selectedItemBuilder
// 감지된 제스처가 음향 및/또는 촉각 피드백을 제공해야 하는지 여부
bool? enableFeedback,
// 버튼의 높이 줄일지 여부
bool isDense,
// dropdownbutton 의 밑줄
Widget? underline
// dropdownbutton click event
VoidCallback? onTap
// focus 관련 속성 입니다.
Color? focusColor,
FocusNode? focusNode,
bool autofocus,
DropdownMenuItem 속성
// DropdownButton 의 onChanged 에서 반환하는 값
T? value
// 활성화 여부
bool enabled
// click event
VoidCallback? onTap
Sample
class SampleScreen extends StatefulWidget {
const SampleScreen({Key? key}) : super(key: key);
@override
State<SampleScreen> createState() => _SampleScreenState();
}
class _SampleScreenState extends State<SampleScreen> {
final _cities = ['서울', '대전', '대구', '부산', '인천', '울산', '광주'];
String? _selectedCity;
@override
void initState() {
super.initState();
setState(() {
_selectedCity = _cities[0];
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: DropdownButton(
value: _selectedCity,
items: _cities
.map((e) => DropdownMenuItem(
value: e,
child: Text(e),
))
.toList(),
onChanged: (value) {
setState(() {
_selectedCity = value!;
});
},
),
),
);
}
}
728x90
반응형