[flutter] DropdownButton 위젯의 아이템을 그룹화하기

08 Dec 2023

flutter

DropdownButton은 사용자가 선택할 수 있는 옵션 목록을 표시하는 Flutter 위젯입니다. 때로는 DropdownButton의 아이템을 그룹화하여 표시해야 하는 경우가 있습니다. 이를 위해 DropdownMenuItem과 ListTile을 함께 사용하여 아이템을 그룹화할 수 있습니다.

그룹화된 DropdownButton 아이템 구현하기

아래는 DropdownButton 위젯에서 그룹화된 아이템을 표시하는 예제 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('그룹화된 DropdownButton'),
        ),
        body: Center(child: GroupedDropdown()),
      ),
    );
  }
}

class GroupedDropdown extends StatefulWidget {
  @override
  _GroupedDropdownState createState() => _GroupedDropdownState();
}

class _GroupedDropdownState extends State<GroupedDropdown> {
  String _selectedItem;

  @override
  Widget build(BuildContext context) {
    return DropdownButton(
      value: _selectedItem,
      onChanged: (String value) {
        setState(() {
          _selectedItem = value;
        });
      },
      items: [
        DropdownMenuItem(
          value: 'group1_item1',
          child: ListTile(title: Text('그룹 1 - 아이템 1')),
        ),
        DropdownMenuItem(
          value: 'group1_item2',
          child: ListTile(title: Text('그룹 1 - 아이템 2')),
        ),
        DropdownMenuItem(
          value: 'group2_item1',
          child: ListTile(title: Text('그룹 2 - 아이템 1')),
        ),
        DropdownMenuItem(
          value: 'group2_item2',
          child: ListTile(title: Text('그룹 2 - 아이템 2')),
        ),
      ],
    );
  }
}

위의 예제 코드에서 DropdownButton 위젯을 사용하여 DropdownMenuItem과 ListTile을 함께 사용하여 아이템을 그룹화할 수 있습니다.

그룹화된 DropdownButton을 사용하면 사용자가 선택할 수 있는 옵션 목록을 효과적으로 그룹화하여 표시할 수 있습니다.

결론

Flutter의 DropdownButton 위젯을 사용하여 아이템을 그룹화하는 방법에 대해 알아보았습니다. DropdownButton과 ListTile을 함께 사용하여 그룹화된 아이템을 표시할 수 있으며, 이를 활용하여 사용자 경험을 향상시킬 수 있습니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참고하시기 바랍니다.