[j Flutter] DropDownFormField (드롭박스) 구현하기

1. 먼저 DropDownFormField 패키지를 설치해준다.

dropdown_formfield: ^0.1.3

 

pub.dev/packages/dropdown_formfield/install

dropdown_formfield | Flutter Package

 

2. 드롭박스에 넣을 임의의 데이터를 만들어준다.

const List category_map = [
  {"code": "1", "title": "1월"},
  {"code": "2", "title": "2월"},
  {"code": "3", "title": "3월"},
];

 

3. DropDownFormField 구현 

 String _category;
 String _categoryResult;
  
 DropDownFormField(
                                hintText: '카테고리를 선택해주세요.',
                                value: _category != null ? _category : '',
                                onSaved: (value) {
                                  setState(() {
                                    _category = value;
                                  });
                                },
                                onChanged: (value) {
                                  setState(() {
                                    _category = value;
                                    _categoryResult = _category;
                                  });
                                },
                                dataSource: category_map,
                                textField: 'title',
                                valueField: 'code',
                              )

 

- dataSource : list데이터를 넣어준다.

- textField : 드롭다운박스에 나타날 값의 list 값을 넣어준다.

- valueField : 드롭다운선택 시 구분 할 코드를 넣어준다.