[flutter] dropdownButton 적용하기 (feat. flutter widget of the week)

노마드 코드 flutter 챌린지를 하던 도중 여러개의 선택지 중 하나의 시간을 선택하여야 할 일이 생겼고, 어떤 위젯을 사용해야 할까 고민하다가 찾아 낸 위젯이 dropdownButton이다.

dropdownButton 위젯은 옵션지가 주어지고 그 중 하나를 선택하는 형태의 위젯

해당 위젯의 설명은 flutter의 공식 유튜브에도 나와있다.

 

프로젝트에 적용을 해봤다
나는 타이머를 만들 되, 타이머 분 수를 15분부터 35분까지 5분 간격으로 사용자가 선택할 수 있도록 구현하려고 했다.

int totalSeconds = 1500;

void changeSeconds(int? seletedValue) => {
        if (seletedValue is int)
          {
            setState(() => {totalSeconds = seletedValue}),
            print(seletedValue)
          }
      };

@override
...
DropdownButton(items: const [
    DropdownMenuItem(value: 900, child: Text('15')),
    DropdownMenuItem(value: 1200, child: Text('20')),
    DropdownMenuItem(value: 1500, child: Text('25')),
    DropdownMenuItem(value: 1800, child: Text('30')),
    DropdownMenuItem(value: 2100, child: Text('35')),
    ], 
    onChanged: changeSeconds),
    isExpanded: true, // 사이즈를 화면 크기 전체로 확장할지의 여부
    iconSize: 40, // 아이콘 사이즈 크기
    dropdownColor: Colors.white, // 옵션이 켜졌을 때의 배경화면 색
    hint: const Text('원하는 시간을 선택하세요'), // 옵션을 누르기 전 힌트
...

DropdownButton이라는 위젯 안에는 items 값들이 필요하고 각 iteme들마다 value값에는 분을 초로 바꾼 값, child에는 사용자가 볼 수 있는 옵션값을 지정해 주면 된다.

옵션을 변경할 때 변화되는 onChanged 콜백에는 setState를 주어 변화되는 값이 totalSeconds 변수로 들어가게 적용했다.

옵션을 적용하지 않았을 때도 잘 되지만 사이즈나 디자인이 약간 맘에 들지 않아 옵션을 추가했다.

정상적으로 되는 것 확인 ..!!

 

내가 하고 싶은 기능을 직접 찾아서 구현해보는 것은 언제나 재밌다 ㅎㅎ
flutter는 특히 위젯에 대한 설명이 잘 나와있어서 더욱 재밌게 구현했던 것 같다

---

출처

https://www.youtube.com/watch?v=ZzQ\_PWrFihg