DropdownButton
DropdownButton class - material library - Dart API
A material design button for selecting from a list of items. A dropdown button lets the user select from a number of items. The button shows the currently selected item as well as an arrow that opens a menu for selecting another item. The type T is the typ
api.flutter.dev
2. DropdownButton 위젯의 속성값에 대해 살펴 보자.
- value : 초기값
- icon : 아이콘을 원하는대로 바꿔줄 수 있다. 위와 같은 아이콘으로 설정해 주었다.
- iconSize : 아이콘의 size를 지정한다.
- underline : 속성이 없을시 위의 이미지처럼 보인다.
underline: Container( ),
속성에 빈 Container() 를 주게 되면 라인이 전혀 보이지 않아 원하던 형태가 나온다.
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
위와 같이 주면 DropdownButton에 밑줄형태가 생긴다.
- item 속성은 필수이며 DropdownMenuItem List를 받는다.
final List<DropdownMenuItem<T>>? items;
4. DropdownMenuItem 위젯
https://api.flutter.dev/flutter/material/DropdownMenuItem-class.html
DropdownMenuItem class - material library - Dart API
An item in a menu created by a DropdownButton. The type T is the type of the value the entry represents. All the entries in a given menu must represent values with consistent types. Inheritance Constructors Creates an item for a dropdown menu. [...] const
api.flutter.dev
- child 에 원하는 형태의 위젯을 넣고,
- value 값은 중복되지 않게 지정해 준다.
5. 완성소스
DropdownButton<String>(
value: _value,
icon: const Icon(Icons.keyboard_arrow_down),
iconSize: 30,
underline: Container(),
items: [
DropdownMenuItem(
child: Text('Delivery to 1600 Amphitheater Way', style: Theme.of(context).textTheme.headline2,),
value: '1',
),
DropdownMenuItem(
child: Text('Delivery to 1800', style: Theme.of(context).textTheme.headline2,),
value: '2',
),
DropdownMenuItem(
child: Text('Delivery to 1800', style: Theme.of(context).textTheme.headline2,),
value: '3',
),
DropdownMenuItem(
child: Text('Delivery to 1800', style: Theme.of(context).textTheme.headline2,),
value: '4',
),
],
onChanged: (value) {
setState(() {
_value = value!;
});
},
)