Flutter - DropDownButton 위젯 사용 방법 (드롭다운 메뉴 펼치기)

Overview

앱 내에서 드롭다운 버튼을 사용하여 리스트의 값을 사용자가 선택할 수 있도록 합니다.

 

포스팅에서 사용된 프로젝트는 깃허브에서 확인가능합니다.

• https://github.com/luvris2/flutter-example
• 하위 경로 : flutter_how_to_use_widgets_example

---

DropdownButton

기본 개념

• 특정 항목의 목록을 선택하기 위한 Material 디자인 버튼
• 버튼에는 현재 선택된 항목과 다른 항목을 선택할 수 있도록 메뉴를 여는 화살표가 함께 표시
• 펼쳐진 메뉴에서 사용자는 여러 항목 중 하나의 항목 선택 가능

---

기본 구문

DropdownButton(
    items: items, // [필수] 드롭다운 리스트 항목
    onChanged: onChanged, // [필수] 리스트의 항목이 변경되었을 경우
    value : value, // [옵션] 선택한 항목의 값을 드롭다운 버튼에 표시
)

 

•  items
  • 필수로 정의해주어야 하는 항목
  • 드롭다운의 메뉴를 펼쳤을 때 보여질 아이템 리스트를 정의
  • DropdownMenuItem 위젯의  value와 child로 구성

// 드롭다운 메뉴 아이템 정의 예시
DropdownMenuItem(
  value: '1',
  child: Text('1'),
);

// 드롭다운 위젯에서의 아이템 정의
DropdownButton(
  // 드롭다운의 리스트를 보여줄 값
  items: const [
    DropdownMenuItem(
      value: '1',
      child: Text('1'),
    ),
    DropdownMenuItem(
      value: '2',
      child: Text('2'),
    ),
    DropdownMenuItem(
      value: '3',
      child: Text('3'),
    ),
  ],
);

 
위와 같이 정의하지만, 항목이 많아지면 작업의 양이 늘어나므로
아래와 같은 방법을 통해 정의하는 것을 권장한다.

// 드롭다운 메뉴 아이템 정의 예시 : 리스트 타입으로 저장
List<String> dropDownList = ['1', '2', '3'];

// 드롭다운 위젯에서의 아이템 정의
DropdownButton(
  // 드롭다운의 리스트를 보여줄 값
  items: dropDownList.map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
);

 

• onChanged
  • 필수로 정의해주어야 하는 항목
  • 사용자가 드롭다운 버튼에서 값을 선택하였을 때의 액션을 정의
  • 보통 드롭다운 버튼을 통해 값의 변화를 화면에 보여야 하므로 setState와 함께 사용

// 드롭다운 버튼의 onChanged 구문
onChanged : (String? value) {
	// 항목 선택 시 코드 정의
}

---

Flutter 공식 문서의 샘플 코드

import 'package:flutter/material.dart';

/// Flutter code sample for [DropdownButton].

const List<String> list = <String>['One', 'Two', 'Three', 'Four'];

void main() => runApp(const DropdownButtonApp());

class DropdownButtonApp extends StatelessWidget {
  const DropdownButtonApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('DropdownButton Sample')),
        body: const Center(
          child: DropdownButtonExample(),
        ),
      ),
    );
  }
}

class DropdownButtonExample extends StatefulWidget {
  const DropdownButtonExample({super.key});

  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  String dropdownValue = list.first;

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      icon: const Icon(Icons.arrow_downward),
      elevation: 16,
      style: const TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String? value) {
        // This is called when the user selects an item.
        setState(() {
          dropdownValue = value!;
        });
      },
      items: list.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

---

반응형

구현

요구사항

1) 화면에 드롭다운 버튼 생성하여 사용자가 항목의 리스트를 선택할 수 있어야 함
2) 드롭다운 버튼을 터치하면 그와 관련된 리스트를 출력할 수 있어야 함
3) 선택된 항목을 드롭다운 버튼의 값으로 표시되어야 함
4) 선택된 항목의 값을 Text 위젯에 사용자가 알아볼 수 있도록 표시되어야 함

---

코드

실행화면은 포스팅의 가장 위, Overview에서 확인 가능합니다.

// dropDownWidgets.dart
import 'package:flutter/material.dart';

class DropDownPage extends StatefulWidget {
  const DropDownPage({super.key});

  @override
  State<DropDownPage> createState() => _DropDownPageState();
}

class _DropDownPageState extends State<DropDownPage> {
  // 드롭다운 버튼의 선택된 값을 저장할 변수
  String dropDownValue = "1";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
              child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 드롭다운 위젯
              _buildArea(),
              // 선택한 값 보여주기
              Text("드롭다운 버튼에서 '$dropDownValue'을(를) 선택하셨습니다."),
            ],
          )),
        ),
      ),
    );
  }

  Widget _buildArea() {
    // 드롭다운 리스트
    List<String> dropDownList = ['1', '2', '3'];

    // 초기값 설정
    if (dropDownValue == "") {
      dropDownValue = dropDownList.first;
    }

    return DropdownButton(
      // 드롭다운 버튼에 처음 보여질 값
      value: dropDownValue,
      // 드롭다운의 리스트를 보여줄 값
      items: dropDownList.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
      // 드롭다운의 값을 선택했을 경우
      onChanged: (String? value) {
        setState(() {
          dropDownValue = value!;
          print(dropDownValue);
        });
      },
    );
  }
}

---

참고

• Flutter 공식 문서 - DropdownButton<T> Class