Flutter] DropdownButton으로 DropBox 구현하기

final _valueList = ['최대', '50%', '25%', '15%', '10%'];
 String? _selectedValue;

... 생략

Container(
  child: DropdownButton(
    hint: Text('비율'),
    items: _valueList
        .map(
          (String item) => DropdownMenuItem(
            child: Text(item),
            value: item,
          ),
        )
        .toList(),
    onChanged: (String? value) => setState(() {
      print('==> ${this._selectedValue}');
      print('==> selected $value');
      this._selectedValue = value;
    }),
    value: _selectedValue,
  ),
),

웹에서는 select box라고 하는데 모바일에서는 DropBox라고 한다.

 

Flutter에서는 기본 값을 보여주려면 Equatable이라는 플러그인을 상속 받아서 쓰는 방법이 있는데..

현재 데이터 연동을 하는 것이 아니기때문에 이 방법은 적절하지 않았다.

 

해당 관련 글 : https://stackoverflow.com/questions/60510150/flutter-there-should-be-exactly-one-item-with-dropdownbuttons-value

Flutter: There should be exactly one item with [DropdownButton]'s value

 

Equatable 사용법 (국내) : https://blog.codefactory.ai/flutter/equatable/

 

 

대신 DropdownButton에는 초기값을 보여주는 hint 라는 옵션이 있어서 이 부분을 사용하면 쉽게 초기값을 보여줄 수 있다. (웹에서 placehold같은...?)

 

위와 같은 소스로 일단 구현을 했다.

 

 

 

참고 : https://www.technicalfeeder.com/2021/11/flutter-dropdown-button-example/

Flutter Dropdown Button hint text and initial value