Flutter에서 PopupMenuButton에 Radius 추가하기

Flutter에서 둥근 모서리를 가진 PopupMenuButton 만드는 방법

Flutter 개발 과정에서는 때때로 PopupMenuButton 위젯을 사용할 필요가 있습니다. 이 위젯은 사용자에게 팝업 메뉴를 제공하고, 그 메뉴에서 항목을 선택할 수 있게 합니다. 기본적으로 PopupMenuButton은 각진 모서리를 가지지만, 필요에 따라 둥근 모서리로 만들 수도 있습니다.

둥근 모서리를 가진 PopupMenuButton 만드는 방법

둥근 모서리를 가진 PopupMenuButton을 만들기 위해서는 'shape' 속성과 'borderRadius' 속성을 활용하면 됩니다. 'shape' 속성에는 RoundedRectangleBorder을 지정하고, 'borderRadius' 속성에는 원하는 모서리 반경을 지정합니다.

예제: 모서리 반경 20으로 설정한 둥근 PopupMenuButton

PopupMenuButton(
  child: Text("Show Popup Menu"),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(20.0)),
  ),
)

예제: 모서리 반경 15로 설정한 둥근 PopupMenuButton

아래 예제는 모서리 반경이 15인 둥근 PopupMenuButton을 생성하는 방법입니다. 또한, 팝업 메뉴에 표시되는 항목들을 지정하기 위해 itemBuilder 속성을 사용합니다.

PopupMenuButton(
  child: Text("Show Popup Menu"),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(15.0)),
  ),
 itemBuilder: (context) => [
    PopupMenuItem(
      child: Text("pub.dev"),
    ),
    PopupMenuItem(
      child: Text("Flutter"),
    ),
    PopupMenuItem(
      child: Text("Google.com"),
    ),
    PopupMenuItem(
      child: Text("https://blogdeveloperspot.blogspot.com"),
    ),
 ],
)

마치며

이렇게 Flutter에서 둥근 모서리를 가진 PopupMenuButton을 만드는 방법에 대해 알아보았습니다. 이를 활용하면 사용자 친화적인 UI를 만들 수 있습니다.