[flutter] Row 위젯에서의 드롭다운 메뉴 사용하기

07 Dec 2023

flutter

Flutter는 다양한 위젯을 제공하여 사용자 인터페이스를 구축하는 데 도움을 줍니다. Row 위젯은 수평 방향으로 위젯을 배치하는 데 사용되며, 드롭다운 메뉴를 포함한 인터페이스를 만드는 데 유용합니다.

이번 글에서는 Row 위젯에 드롭다운 메뉴를 어떻게 추가하는지 알아보겠습니다.

1. 드롭다운 메뉴 위젯 추가하기

우선, Flutter 프로젝트에서 Row 위젯을 생성합니다. 이때 드롭다운 메뉴 위젯을 추가할 위치를 고려하여 Row 위젯을 배치합니다.

Row(
  children: [
    // 드롭다운 메뉴를 추가할 위젯들을 배치
  ],
)

2. 드롭다운 버튼 추가하기

드롭다운 메뉴를 열고 닫을 수 있는 버튼을 추가합니다. 이때 일반 버튼 또는 아이콘 버튼을 사용할 수 있으며, 필요한 경우 버튼을 눌렀을 때 드롭다운 메뉴를 열거나 닫도록 로직을 구현해야 합니다.

DropdownButton<String>(
  value: dropdownValue,
  icon: Icon(Icons.arrow_drop_down),
  iconSize: 24,
  elevation: 16,
  style: TextStyle(color: Colors.deepPurple),
  underline: Container(
    height: 2,
    color: Colors.deepPurpleAccent,
  ),
  onChanged: (String newValue) {
    setState(() {
      dropdownValue = newValue;
    });
  },
  items: <String>['Option 1', 'Option 2', 'Option 3', 'Option 4']
    .map<DropdownMenuItem<String>>((String value) {
      return DropdownMenuItem<String>(
        value: value,
        child: Text(value),
      );
    })
    .toList(),
)

3. 드롭다운 메뉴 항목 추가하기

DropdownButton 위젯의 items 속성을 사용하여 드롭다운 메뉴에 나타낼 항목들을 추가합니다. 항목의 수는 필요에 따라 유동적으로 조정할 수 있으며, 각 항목의 값과 텍스트를 지정합니다.

items: <String>['Option 1', 'Option 2', 'Option 3', 'Option 4']
  .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  })
  .toList(),

4. 드롭다운 메뉴 값 변경 처리

DropdownButton 위젯의 onChanged 속성을 사용하여 드롭다운 메뉴 값이 변경됐을 때 처리할 로직을 구현합니다. 주로 상태 관리에 사용하는 StatefulWidget를 사용하여 상태를 변경하는 방식으로 처리합니다.

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

드롭다운 버튼을 클릭하여 메뉴 항목을 선택하면 해당 값을 dropdownValue와 같은 상태 변수에 할당하고 상태를 업데이트합니다.

이렇게 Row 위젯에 드롭다운 메뉴를 추가할 수 있습니다. 드롭다운 메뉴의 디자인과 동작을 더욱 향상시킬 수 있으며, Flutter의 다양한 위젯과 기능을 활용하여 필요에 맞는 인터페이스를 구현할 수 있습니다.

더 자세한 내용은 Flutter 공식 문서(https://flutter.dev/docs) 를 참고하세요.