Flutter의 드롭다운(Dropdown) 사용법

Flutter에서 DropdownButton 위젯은 사용자가 여러 선택지 중 하나를 선택할 수 있도록 하는 인터페이스 요소입니다. 드롭다운 메뉴는 사용자가 옵션을 선택할 때 유용하며, 선택한 항목을 표시하는 간단하고 직관적인 방법을 제공합니다. 이번 글에서는 Flutter의 DropdownButton 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 DropdownButton 사용법

DropdownButton 위젯의 기본적인 사용법은 매우 간단합니다. items 속성에 드롭다운 메뉴의 항목을 정의하고, value와 onChanged 속성을 사용하여 선택된 항목과 상태 변경 이벤트를 처리할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _selectedValue = 'One';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('DropdownButton Demo')),
        body: Center(
          child: DropdownButton<String>(
            value: _selectedValue,
            items: <String>['One', 'Two', 'Three', 'Four']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String? newValue) {
              setState(() {
                _selectedValue = newValue;
              });
            },
          ),
        ),
      ),
    );
  }
}

 

위 코드는 기본적인 드롭다운 버튼을 생성하고, 사용자가 항목을 선택할 때 _selectedValue 상태가 변경되도록 합니다.

2. 드롭다운 버튼의 스타일링

DropdownButton 위젯의 스타일을 변경하려면 style, underline, icon 등의 속성을 사용합니다.

 

DropdownButton<String>(
  value: _selectedValue,
  icon: Icon(Icons.arrow_downward),
  iconSize: 24,
  elevation: 16,
  style: TextStyle(color: Colors.deepPurple),
  underline: Container(
    height: 2,
    color: Colors.deepPurpleAccent,
  ),
  items: <String>['One', 'Two', 'Three', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      _selectedValue = newValue;
    });
  },
)

 

위 코드는 드롭다운 버튼의 아이콘, 아이콘 크기, 강조 색상, 텍스트 스타일, 밑줄 스타일을 설정합니다.

3. 드롭다운 메뉴 항목에 아이콘 추가

드롭다운 메뉴 항목에 아이콘을 추가하여 더욱 풍부한 사용자 인터페이스를 만들 수 있습니다.

 

DropdownButton<String>(
  value: _selectedValue,
  items: <String>['One', 'Two', 'Three', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Row(
        children: <Widget>[
          Icon(Icons.star, color: Colors.amber),
          SizedBox(width: 10),
          Text(value),
        ],
      ),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      _selectedValue = newValue;
    });
  },
)

 

위 코드는 드롭다운 메뉴 항목에 아이콘을 추가하고, 텍스트와 함께 배치합니다.

 

 

반응형

 

4. 비활성화된 드롭다운 버튼

드롭다운 버튼을 비활성화하려면 onChanged 속성에 null을 할당합니다.

 

DropdownButton<String>(
  value: _selectedValue,
  items: <String>['One', 'Two', 'Three', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: null, // 드롭다운 버튼 비활성화
)

 

위 코드는 드롭다운 버튼을 비활성화하여 사용자가 선택할 수 없도록 합니다.

5. 드롭다운 메뉴의 초기값 설정

드롭다운 메뉴의 초기값을 설정하려면 value 속성에 초기값을 할당합니다.

 

String? _selectedValue = 'Two'; // 초기값 설정

@override
Widget build(BuildContext context) {
  return DropdownButton<String>(
    value: _selectedValue,
    items: <String>['One', 'Two', 'Three', 'Four']
        .map<DropdownMenuItem<String>>((String value) {
      return DropdownMenuItem<String>(
        value: value,
        child: Text(value),
      );
    }).toList(),
    onChanged: (String? newValue) {
      setState(() {
        _selectedValue = newValue;
      });
    },
  );
}

 

위 코드는 드롭다운 메뉴의 초기값을 'Two'로 설정합니다.

6. 여러 개의 드롭다운 버튼 처리

여러 개의 드롭다운 버튼을 처리하려면 각 드롭다운 버튼의 상태를 별도로 관리하고, 각 드롭다운 버튼의 상태 변경을 처리하는 방법을 구현해야 합니다.

 

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _selectedValue1 = 'One';
  String? _selectedValue2 = 'Two';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Multiple DropdownButtons')),
        body: Column(
          children: <Widget>[
            DropdownButton<String>(
              value: _selectedValue1,
              items: <String>['One', 'Two', 'Three', 'Four']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (String? newValue) {
                setState(() {
                  _selectedValue1 = newValue;
                });
              },
            ),
            DropdownButton<String>(
              value: _selectedValue2,
              items: <String>['One', 'Two', 'Three', 'Four']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (String? newValue) {
                setState(() {
                  _selectedValue2 = newValue;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 두 개의 드롭다운 버튼을 생성하고, 각 드롭다운 버튼의 상태를 별도로 관리합니다.

결론

DropdownButton 위젯은 Flutter 애플리케이션에서 사용자로부터 여러 선택지 중 하나를 선택하도록 하는 데 매우 유용한 도구입니다. 기본 사용법부터 스타일링, 메뉴 항목에 아이콘 추가, 비활성화, 초기값 설정, 여러 드롭다운 버튼 처리 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. DropdownButton 위젯을 적절히 활용하여 직관적이고 효율적인 사용자 인터페이스를 제공하는 애플리케이션을 만들어보세요.