Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add rounded border for PopupMenu in Flutter?

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

enter image description here

like image 899
Mārtiņš Ciekurs Avatar asked Jun 17 '19 22:06

Mārtiņš Ciekurs


2 Answers

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"),
        ),
      ],
    ),
like image 175
Taz Avatar answered Oct 28 '22 11:10

Taz


Another simple way is:

shape: ContinuousRectangleBorder(
         borderRadius: BorderRadius.circular(30),
       ),
like image 2
wahid anvary Avatar answered Oct 28 '22 11:10

wahid anvary