[flutter] DropdownButton 위젯을 사용하여 메뉴 선택 기능 구현하기

08 Dec 2023

flutter

Flutter에서 DropdownButton 위젯을 사용하면 사용자가 목록에서 항목을 선택할 수 있는 메뉴를 구현할 수 있습니다. 이번 글에서는 DropdownButton 위젯을 설명하고, 간단한 예제를 통해 메뉴 선택 기능을 구현하는 방법에 대해 알아보겠습니다.

DropdownButton 위젯

DropdownButton은 사용자가 여러 옵션 중 하나를 선택할 수 있는 드롭다운 메뉴를 만들어주는 Flutter의 위젯입니다. DropdownButton을 사용하면 간편하게 다양한 항목 중에서 선택할 수 있는 인터페이스를 제공할 수 있습니다.

예제: 간단한 DropdownButton 구현하기

다음은 DropdownButton 위젯을 사용하여 간단한 메뉴 선택 기능을 구현하는 예제 코드입니다.

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  String _selectedItem = '항목1';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DropdownButton 예제'),
        ),
        body: Center(
          child: DropdownButton<String>(
            value: _selectedItem,
            items: <String>['항목1', '항목2', '항목3', '항목4']
                .map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String? value) {
              setState(() {
                _selectedItem = value!;
              });
            },
          ),
        ),
      ),
    );
  }
}

위 예제 코드는 DropdownButton을 사용하여 ‘항목1’, ‘항목2’, ‘항목3’, ‘항목4’ 중에서 항목을 선택할 수 있는 간단한 앱을 구현한 것입니다.

결론

DropdownButton 위젯을 이용하면 사용자가 목록에서 항목을 선택할 수 있는 메뉴를 쉽게 구현할 수 있습니다. 이를 통해 애플리케이션의 사용자 경험을 향상시키고, 상호작용성을 높일 수 있습니다.

이상으로 Flutter에서 DropdownButton 위젯을 사용하여 메뉴 선택 기능을 구현하는 방법에 대해 알아보았습니다.

참고 자료

Flutter DropdownButton 공식 문서

</br>

내용에 대한 피드백이 있으시면 언제든지 말씀해주세요.