Flutter 기초 - PopupMenu (21)

 

Flutter 기초 - PopupMenu  (21)

 

1. PopupMenu

 - itemBuilder속성을 통해서 메뉴 항목을 생성한다. 각 메뉴 항목에서 PopupMenuItem Widget을 사용해 정의하고 onSelected콜백에서 처리된다.

 

class TestPopupMenu extends StatefulWidget {
  const TestPopupMenu({super.key});

  @override
  State<TestPopupMenu> createState() => _TestPopupMenuState();
}

class _TestPopupMenuState extends State<TestPopupMenu> {
  TestRadioValue selectValue = TestRadioValue.test1;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(selectValue.name),  // 현재 선택된 값을 화면에 표시
        PopupMenuButton<TestRadioValue>(
          onSelected: (TestRadioValue value) {
            setState(() {
              selectValue = value;
            });
          },
          itemBuilder: (BuildContext context) {
            return TestRadioValue.values.map((e) =>
                PopupMenuItem<TestRadioValue>(
                  value: e,
                  child: Text(e.name),
                )
            ).toList();  // toList() is now correctly placed outside the map function
          },
        ),
      ],
    );
  }
}

 

TestPopupMenu

 - StateWidget으로 사용자의 작용에 따라 상태가 변할 수 있다.

 

PopupMenuButton Widget

 - PopupMenuButton<TestRadioValue> : 제네릭 타입으로 TestRadioValue를 사용해 팝업 메뉴의 항목이 TestRadioValue열거형의 값을 가지도록 설정한다.

 - onSelected : 팝업 메뉴에서 항목을 선택했을때 실행되는 콜백 함수로 선택된 값을 selectValue에 할당하고 setState()를 호출해 UI를 업데이트 한다.

 - itemBuilder : 팝업 메뉴 항목을 동적으로 생성해 TestRadioValue.values를 이용해서 열거형의 모든 값을 순회하며 각 값에 대해서 PopupMenuItem<TestRadioValue>를 생성한다.