플러터에서 팝업 메뉴 버튼(PopupMenuButton) 구현하기

 

앱에서 메뉴를 구성해야 할 때 유용하게 사용하는 팝업메뉴버튼을 만들어봅시다.

 

1. PopupMenuButton

https://api.flutter.dev/flutter/material/PopupMenuButton-class.html

PopupMenuButton class - material library - Dart API

 

모습은 아래 이미지와 같고요.

가로선을 넣어서 메뉴들을 구분해 줄 수도 있고, 팝업이 펼쳐질 때 애니메이션 효과도 넣을 수 있습니다.

팝업메뉴버튼

 

 

 

2. 코드

플러터 프로젝트를 생성하면 기본적으로 만들어지는 코드 파일에서, Scaffold의 Appbar에 추가로 팝업메뉴버튼을 만들어보았어요.

Appbar의 우측에 팝업메뉴버튼을 만들어보았습니다.

PopupMenuButton 위젯 안에 itemBuilder 속성을 이용해서 각각의 메뉴 아이템인 PopupMenuItem을 만들어줍니다. 

 

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
        actions: [
          PopupMenuButton(
            popUpAnimationStyle: AnimationStyle( //애니메이션 설정
              curve: Easing.emphasizedDecelerate,
              duration: const Duration(seconds: 2),
            ),
            icon: Icon(Icons.more_vert),
            itemBuilder: (context) => <PopupMenuEntry>[
              PopupMenuItem(
                onTap: () {
                  //탭 했을 때 호출
                  print('Add clicked...');
                },
                child: ListTile(
                  leading: Icon(Icons.add),
                  title: Text('Add'),
                ),
              ),
              PopupMenuItem(
                onTap: () {
                  print('Edit clicked...');
                },
                child: ListTile(
                  leading: Icon(Icons.edit),
                  title: Text('Edit'),
                ),
              ),
              const PopupMenuDivider(), //수평선 추가
              PopupMenuItem(
                onTap: () {
                  print('Remove clicked...');
                },
                child: ListTile(
                  leading: Icon(Icons.delete_outline),
                  title: Text('Remove'),
                ),
              ),
              PopupMenuItem(
                onTap: () {
                  print('Download clicked...');
                },
                child: ListTile(
                  leading: Icon(Icons.download_outlined),
                  title: Text('Download'),
                ),
              ),
            ],
          ),
        ],
      ),
      body: Center(
        ...
    );
  }
}

 

 

 

3. 테스트

Appbar의 제목 우측에 점 세 개가 팝업메뉴버튼입니다.

 

클릭하면 애니메이션 효과와 함께 메뉴가 나타납니다.