How to add rounded border for PopupMenu in Flutter?

Question

Is there any way I could create custom pop up with rounded borders? This is my current code and design:

                child: Container(
                 child: PopupMenuButton(
                   onSelected: _savedLocationOptionSelected,
                   itemBuilder: (context) {
                     return SavedLocationOptions.choises.map((value) {
                       return PopupMenuItem<String>(
                         value: value,
                         child: Text(value),
                       );
                     }).toList();
                   },
                   icon: Icon(
                     Icons.more_vert,
                     color: Colors.grey[300],
                   ),
                 ),
               ),

Same issue here... the shape property is missing ^^ – Rebar Aug 01 '19 at 15:46 — Rebar, Aug 01 '19 at 15:46

Taz · Accepted Answer · 2021-09-14T23:15:40.927

You just add like this at PopupMenuButton

shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
               Radius.circular(20.0),
          ),
),

Example

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

Great answer, solved my problem. – 4xMafole Jan 12 '22 at 17:26 — 4xMafole, Jan 12 '22 at 17:26

score 4 · Answer 2 · answered Oct 27 '21 at 04:46

4

Adding to the answer given by @Taz You can use themes to have settings for rounded corners in each and every Popups at one place:

MaterialApp(
  // ....
  theme: ThemeData(
  // ....
  popupMenuTheme: PopupMenuThemeData(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))
  )
)

answered Oct 27 '21 at 04:46

DrGeneral

1,844
1
16
22

The good answer – tbm98 May 20 '23 at 05:43

score 2 · Answer 3 · answered Oct 26 '21 at 20:43

2

Another simple way is:

shape: ContinuousRectangleBorder(
         borderRadius: BorderRadius.circular(30),
       ),

answered Oct 26 '21 at 20:43

wahid anvary

392
3
11

score -2 · Answer 4 · answered Nov 17 '19 at 15:39

Click Right on "PopupMenuButton" in your code then Paste it in The Page will Opend Named By "PopupMenu" and Paste the Code in This Link to Dart File

Then Visit this Link : https://github.com/mohamedashraf8850/flutter/edit/master/packages/flutter/lib/src/material/popup_menu.dart

How to add rounded border for PopupMenu in Flutter?

4 Answers4