Flutter DropdownButton 다루기

안녕하세요 독학코딩입니다. 오늘은 Flutter의 드랍다운버튼, Dropdownbutton에 대해서 배워보겠습니다. 어떤한 앱을 만드시든 아마 필수적으로 들어갈 수 밖에 없는 위젯이니 이 기회에 잘 알아두시면 좋을 것 같습니다. 

 

Flutter DropdownButton 기초

DropdownButton<String>(
  value: dropdownValue,
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
  items: dropdownList.map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
)

Flutter DropdownButton은 목록에서 옵션을 선택하기 위한 버튼입니다. 현재 선택된 항목과 다른 항목을 선택하기 위한 메뉴를 여는 화살표가 기본적으로 보여줍니다. DropdownButton은 클릭 시 여러가지 선택사항을 주어주고 유저가 한 가지를 선택하면 DropdownButton의 값을 선택한 것으로 변경해주는 기능을 합니다. 그래서 아래 3가지가 가장 필수적인 기능이라고 생각하시면 됩니다.

• DropdownButton에 기본적으로 설정된 값이 필요
• DropdownButton을 클릭하면 나오는 여러 옵션이 필요
• 옵션을 선택하면 DropdownButton 값을 바꾸는 기능이 필요 

 

위의 코드 예제로 설명한다면 

 

• DropdownButton에 기본적으로 설정된 값이 필요

value: dropdownValue

• DropdownButton을 클릭하면 나오는 여러 옵션이 필요

items: dropdownList.map<DropdownMenuItem<String>>((String value) {
  return DropdownMenuItem<String>(
    value: value,
    child: Text(value),
  );
}).toList(),

• 옵션을 선택하면 DropdownButton 값을 바꾸는 기능이 필요 

onChanged: (String? newValue) {
  setState(() {
    dropdownValue = newValue!;
  });
},

 

이렇게 설명드릴 수 있습니다.

 

그런데 기본설정 값이나 옵션 목록은 어떻게 변경하는 걸까요?? 위의 코드에서는 단순이 dropdownValue, dropdownList라고만 적혀 있는데 그건 어디에 설정 되어 있는 걸까요??

 

전체 코드를 보시면 이해되실 겁니다.

 

class FirstRoute extends StatefulWidget {
  const FirstRoute({Key? key}) : super(key: key);

  @override
  State<FirstRoute> createState() => _FirstRouteState();
}

class _FirstRouteState extends State<FirstRoute> {
  List<String> dropdownList = ['One', 'Two', 'Free', 'Four'];
  String dropdownValue = 'One';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: DropdownButton<String>(
          value: dropdownValue,
          onChanged: (String? newValue) {
            setState(() {
              dropdownValue = newValue!;
            });
          },
          items: dropdownList.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
    );
  }
}

위 전체 코드를 자세히 보시면 아래와 같이 dropdownValue, dropdownList가 build 전에 미리 정의 된걸 확인하실 수 있으실겁니다. 

 

class _FirstRouteState extends State<FirstRoute> {
  List<String> dropdownList = ['One', 'Two', 'Free', 'Four'];
  String dropdownValue = 'One';

이렇게 DropdownButton는 미리 설정된 dropdownValue, dropdownList이라는 data가 있기 때문에 StatefulWidget을 상속받아 사용하여야 합니다. StatefulWidget과 StatelessWidget의 차이에 대해선 다음에 다루겠습니다. 

 

 

Flutter DropdownButton 추가

DropdownButton icon 변경

icon: const Icon(Icons.arrow_downward),

DropdownButton icon 색깔 변경

icon: Icon(Icons.arrow_downward, color: Colors.red),

DropdownButton 글자색 변경

style: const TextStyle(color: Colors.deepPurple),

DropdownButton 밑줄 변경

underline: Container(
   height: 2,
   color: Colors.deepPurpleAccent,
),