Thursday, September 7, 2023

[Flutter]丸いPopupMenuButtonの作成

Flutterを使用して開発する際、PopupMenuButtonを使用する必要があることがあります。このウィジェットは、ユーザーがポップアップメニューからアイテムを選択できるようにします。デフォルトでは、PopupMenuButtonは角のある四角形を持っていますが、角を丸くすることもできます。これを行うには、shapeプロパティを使用してRoundedRectangleBorderウィジェットを使用し、borderRadiusプロパティを使用して角の半径を指定します。

例:角の半径が20の丸いPopupMenuButtonを作成する

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

以下は、角の半径が15の丸いPopupMenuButtonを作成する例です。

例:角の半径が15の丸いPopupMenuButtonを作成する

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"),
    ),
  ],
)

0 개의 댓글:

Post a Comment