[Flutter] 플러터 #09 - DropDown Button

플러터에서 dropdown_button2 패키지를 사용하여 드롭다운 버튼을 생성하는 예제 코드입니다.

해당 패키지는 Flutter 버전 2.0 이상을 지원합니다.

 

먼저, pubspec.yaml 파일에 dropdown_button2 패키지를 추가해야 합니다.

아래와 같이 dependencies 섹션에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  dropdown_button2: ^2.1.3

그리고 나서 flutter pub get 명령을 실행하여 패키지를 다운로드하고 프로젝트에 적용합니다.

 

아래는 드롭다운 버튼을 사용하는 예제입니다.

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

class DropdownButtonWidget extends StatefulWidget {
  @override
  _DropdownButtonWidgetState createState() => _DropdownButtonWidgetState();
}

class _DropdownButtonWidgetState extends State<DropdownButtonWidget> {
  String _selectedItem = 'Item 1';
  List<String> _dropdownItems = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DropdownButton Widget'),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: DropdownButtonHideUnderline(
            child: DropdownButton<String>(
              value: _selectedItem,
              items: _dropdownItems.map((String item) {
                return DropdownMenuItem<String>(
                  value: item,
                  child: Text(item),
                );
              }).toList(),
              onChanged: (String? selectedItem) {
                setState(() {
                  _selectedItem = selectedItem!;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: DropdownButtonWidget(),
  ));
}

  위 예제 코드는 dropdown_button2 패키지를 사용하여 드롭다운 버튼을 생성합니다. _selectedItem 변수는 선택된 항목을 추적하고 _dropdownItems 변수에 드롭다운 목록의 항목들을 저장합니다.

 드롭다운 버튼은 DropdownButton 위젯으로 구성되며, value, items, onChanged 속성을 사용합니다. value는 현재 선택된 항목을 나타내는 문자열 값입니다. items는 드롭다운 목록의 항목들을 나타내는 위젯들의 리스트입니다. onChanged는 항목이 선택되었을 때 호출되는 콜백 함수입니다.

 앱의 화면은 Scaffold로 구성되며, AppBar와 Center 위젯을 포함합니다. 드롭다운 버튼은 Container 위젯 내에 배치되어 있습니다. DropdownButtonHideUnderline 위젯을 사용하여 드롭다운 버튼의 밑줄을 제거하였습니다.

 

아래는 실행 화면입니다.

드롭다운 버튼 실행 화면