[Flutter] 심플한 팝업 메뉴 만들기

더 보기 버튼을 눌렀을 때 선택할 수 있는 목록을 표시하려면 PopupMenuButton 위젯을 사용하면 됩니다.

기본적으로 'more' 아이콘 버튼이 자동 생성되고, 버튼을 눌렀을 때 해당 위치에 팝업 메뉴가 뜨고 각 버튼에 행위를 지정할 수 있습니다.

아래 예제와 같이 아주 심플한 팝업 메뉴를 만들어 보겠습니다.

 

 

import 'package:flutter/material.dart';

class PopUpMenuTest extends StatefulWidget {
  @override
  State<PopUpMenuTest> createState() => PopUpMenuTestState();
}

class PopUpMenuTestState extends State<PopUpMenuTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(child: PopupMenuButton(
      itemBuilder: (context) {
        return [
          PopupMenuItem(
            child: Text('삭제'),
            onTap: () {
              print('삭제 선택');
            },
          ),
          PopupMenuItem(
              child: Text('수정'),
              onTap: () {
                print('수정 선택');
              })
        ];
      },
    )));
  }
}

사용 방법은 아주 간단합니다. PopupMenuItem()의 child에 텍스트나 아이콘을 넣고, onTap에 다른 페이지로 이동하는 등의 행위를 넣어주시면 됩니다. 

다만 onTap에서는 다이얼로그는 띄울 수는 없습니다. 그럴 때는 onTap이 아닌, onSelected를 사용해주셔야 합니다.

 

PopupMenuButton(
  itemBuilder: (context) {
    return [
      PopupMenuItem(
          value: 'edit',
          child: Text('수정')),
      PopupMenuItem(
          value: 'delete',
          child: Text('삭제')),
    ];
  },
  onSelected: (value) {
    switch (value) {
      case 'edit':
        print('edit');
        break;
      case 'delete':
	print('delete');
        break;
    }
  },
)

 

onSelected는 각각의 PopupMenuItem 안에서 선언하는 것이 아니라, PopupMenuButton 안에서 선언해주셔야 합니다.

그리고 각각의 PopupMenuItem 안에서 value 값을 지정해주고 onSelected에서는 switch-case문을 사용해서 

case 부분에 value 값을 적어주면 그 아래의 코드가 작동하게 됩니다.