DropdwonButton

 

 

 

기본 개념

• 특정 항목의 목록을 선택하기 위한 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) {
// 항목 선택 시 코드 정의
}

 

 

출처: https://luvris2.tistory.com/805 [고은별의 기술 공유 연구소:티스토리]

 

 

 

공식문서  예제

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(),
    );
  }
}

 

 

 

 

 

 

 

 

https://api.flutter.dev/flutter/material/DropdownButton-class.html

DropdownButton class - material library - Dart API