[flutter] FlatButton을 사용하여 드롭다운 메뉴를 만드는 방법은?

26 Dec 2023

flutter

Flutter에서 드롭다운 메뉴를 만들기 위해서는 FlatButton을 사용하여 화면에 버튼을 만들고, 해당 버튼을 클릭하였을 때 드롭다운 메뉴를 보여주는 기능을 구현해야 합니다. 아래는 이를 위한 간단한 예제 코드입니다.

1. 드롭다운 버튼과 메뉴 만들기

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('Dropdown Menu Example'),
        ),
        body: Center(
          child: DropdownButton<String>(
            onChanged: (String? newValue) {
              print('Selected: $newValue');
            },
            items: <String>['Option 1', 'Option 2', 'Option 3']
                .map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

2. 코드 설명

위 예제에서는 DropdownButton 위젯을 사용하여 드롭다운 버튼을 생성하고, 그 안에 드롭다운 메뉴를 추가했습니다. 각 메뉴 옵션은 DropdownMenuItem으로 구성되어 있습니다.

드롭다운 버튼을 클릭하면 메뉴 항목이 나타나며, 사용자가 원하는 항목을 선택하면 해당 내용이 콘솔에 출력됩니다.

3. 결론

위 예제는 FlatButton을 사용하지 않았지만, 비슷한 방식으로 FlatButton을 활용하여 드롭다운 메뉴를 만들 수 있습니다. 단순히 버튼을 누를 때 드롭다운 메뉴가 나타나도록 디자인하면 됩니다. Flutter에서는 위젯들을 조합하여 다양한 인터페이스를 만들 수 있으므로, 사용자 편의에 따라 적절한 버튼을 이용하여 드롭다운 메뉴를 구현할 수 있습니다.

참고 문헌:

Flutter 공식 문서: https://flutter.dev/docs
Flutter Cookbook: https://flutter.dev/docs/cookbook
Flutter 예제 모음: https://flutter.dev/docs/development/ui/widgets/cupertino

이상입니다. 부족한 부분이 있다면 더 문의해주세요!