[flutter] dropdown

플러터의 드롭다운 위젯은 DropdownButton과 DropdownMenu가 있다.

두개의 기능은 크게 다르게 보이지는 않지만 드롭다운 메뉴는 머터리얼 3 의 디자인으로 구성되었으며 추가적인 차이점은 아래와 같다.

• 메뉴 목록을 가져올땐 DropoutButton.items 대신, 엔트리 목록을 가져오는 DropoutMenu.dropdownMenuEntrys를 사용한다.
• 사용자가 항목을 선택할 때 DropoutButton.onChanged 대신, DropoutMenu.onSelected를 호출한다.
• 드롭다운메뉴에서는 현재선택을 추적할 필요가 없기때문에 사용자 작업이 있기 전에 선택해야 하는 항목으로 DropdownMenu.initialSelection 속성을 설정할 수 있다.
• 드롭다운 메뉴의 스타일링을 변경해야 할 수도 있다.

MenuEntry를 사용한다는 점이 가장큰 차이점 인것 같다.

DropdownButton

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

기존 드롭다운버튼을 드롭다운 메뉴로 변경한 코드

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

/// Flutter code sample for [DropdownMenu].

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(title: const Text('DropdownMenu Sample')),
        body: const Center(child: DropdownMenuExample()),
      ),
    );
  }
}

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

  @override
  State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
}

typedef MenuEntry = DropdownMenuEntry<String>;

class _DropdownMenuExampleState extends State<DropdownMenuExample> {
  static final List<MenuEntry> menuEntries = UnmodifiableListView<MenuEntry>(
    list.map<MenuEntry>((String name) => MenuEntry(value: name, label: name)),
  );
  String dropdownValue = list.first;

  @override
  Widget build(BuildContext context) {
    return DropdownMenu<String>(
      initialSelection: list.first,
      onSelected: (String? value) {
        // This is called when the user selects an item.
        setState(() {
          dropdownValue = value!;
        });
      },
      dropdownMenuEntries: menuEntries,
    );
  }
}

느껴본 차이점

거의 없다. dropdownmenu는 textfield로 수정이된다는 점과 디자인적 요소가 좀더 있다는 것 정도.
textfield를 사용하지 않는 위젯이라면 더욱 큰차이가 없는것같다.

디자인적 요소가 많이 차이난다... dropdownbutton은 많이 제한적이다.