[Flutter] PopupMenuButton - 사용법

 

 

PopupMenuButton은 버튼을 클릭했을 때 팝업으로 여러 항목들을 보여줄 수 있는 위젯입니다. 위젯의 사용법이 약간 까다롭고, 디테일한 UI를 수정하는 부분에서 어려움이 있었습니다. 그래서 각각의 특성들을 한 번 자세히 알아보겠습니다. 

특성들에 대한 설명은 주석으로 상세히 달아놓았고, 아이템을 클릭할 때 splashColor설정이 안 돼서 Theme위젯을 사용했습니다. 

 

 

 

Full code

import 'package:flutter/material.dart';

class PopupMenuButtonScreen extends StatefulWidget {
  const PopupMenuButtonScreen({Key? key}) : super(key: key);

  @override
  State<PopupMenuButtonScreen> createState() => _PopupMenuButtonScreenState();
}

class _PopupMenuButtonScreenState extends State<PopupMenuButtonScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("PopupMenuButton"),
      ),
      body: Center(child: _body()),
    );
  }

  Widget _body() {
    return Theme(
      data: Theme.of(context).copyWith(
        splashColor: Colors.yellow,
      ),
      child: PopupMenuButton<String>(
        /// 팝업 메뉴의 테두리와 round 처리
        shape: RoundedRectangleBorder(
          side: const BorderSide(width: 1, color: Colors.red),
          borderRadius: BorderRadius.circular(7),
        ),

        /// 팝업메뉴 펼쳐졌을 때 그림자 컬러
        shadowColor: Colors.red,

        /// z축 높이
        elevation: 30,

        /// 팝업메뉴의 배경 컬러
        /// icon이나 child 위젯을 선택하지 않을 때 나오는 기본 아이콘의 컬러
        color: Colors.green.shade700,

        /// LongPressed 일 때 나오는 툴팁
        /// "" 를 입력하면 안나옴
        tooltip: "",

        /// 팝업메뉴가 펼쳐질 때 위치설정
        /// over = 아이콘 위로 펼쳐짐
        /// under = 아이콘 아래에서 펼쳐짐
        position: PopupMenuPosition.under,

        /// itemBuilder에 들어간 String 값 중에
        /// initialValue와 동일하다면 선택된 효과
        initialValue: "팝업메뉴 2입니다",

        /// 펼쳤을 때 나오는 항목들 List<PopupMenuItem>
        itemBuilder: (context) {
          return [
            _menuItem("팝업메뉴 1입니다"),
            _menuItem("팝업메뉴 2입니다"),
            _menuItem("팝업메뉴 3입니다"),
          ];
        },

        /// 메뉴 아이템이 펼쳐졌을 때 호출
        onOpened: () {},

        /// 펼쳐진 항목 선택하지 않고, 배경 터치해서 취소한 경우
        onCanceled: () {},

        /// 선택한 값이 들어옴
        onSelected: (value) {},

        /// 펼쳐진 팝업메뉴의 사이즈 제한
        constraints: const BoxConstraints(minWidth: 50, maxWidth: 150),

        /// 메뉴아이템이 펼쳐지는 위치 변경
        /// Offset(20,20)이면 x축 오른쪽으로 20, y축 아래로 20 이동
        offset: const Offset(20, 20),

        /// child와 icon은 둘 중 한개만 사용 가능
        /// 둘 다 입력 안하면 기본 아이콘 출력
        // child: const Text("팝업메뉴 호출" ,style: TextStyle(fontSize: 30),),
        icon: const Icon(Icons.more_horiz),

        /// 아이콘 클릭했을 때 나오는 splash 물결 사이즈
        splashRadius: 60,

        /// 아이콘 사이즈
        iconSize: 50,

        /// padding은 아이콘 argument를 사용할 때만 적용
        /// child에는 적용 안됨
        padding: const EdgeInsets.all(50),

        /// true = 팝업메뉴 호출 가능
        /// false = 팝업메뉴 호출 불가능
        enabled: true,

        /// true = 클릭 사운드 on
        /// false = 클릭 사운드 off
        enableFeedback: true,
      ),
    );
  }

  PopupMenuItem<String> _menuItem(String text) {
    return PopupMenuItem<String>(
      enabled: true,

      /// 해당 항목 선택 시 호출
      onTap: () {},

      /// value = value에 입력한 값이 PopupMenuButton의 initialValue와 같다면
      /// 해당 아이템 선택된 UI 효과 나타남
      /// 만약 원하지 않는다면 Theme 에서 highlightColor: Colors.transparent 설정
      value: text,
      height: 70,
      child: Text(
        text,
        style: const TextStyle(color: Colors.white),
      ),
    );
  }
}

 

 

이미지

 

 

영상