Flutter: how can I make a rounded PopupMenuButton's InkWell?

Question

I have a PopupMenuButton inside a FloatingActionButton. But it's InkWell is not rounded, it is standard square shape. How can I achieve that?

Actually, looking at your question again, it seems like you are trying to use the `PopupMenuButton` in a way it was not made for. You are not supposed to nest buttons. Instead, I recommend you to copy the source code of `PopupMenuButton` and to base it on a FAB instead of an `IconButton`. — boformer, Dec 11 '18 at 00:38

score 52 · Answer 1 · answered Dec 19 '18 at 18:10

52

Use customBorder property of InkWell:

InkWell(
    customBorder: CircleBorder(),
    onTap: () {}
    child: ...
)

answered Dec 19 '18 at 18:10

Dyvoker

2,489
1
9
8

The Inkwell I am talking about is the one used by the PopupMenuButton itself – Daniel Oliveira Dec 19 '18 at 18:28

score 21 · Answer 2 · answered May 20 '20 at 07:44

You can use borderRadius property of InkWell to get a rounded Ink Splash.

Material(
 color: Colors.lightBlue,
 borderRadius: BorderRadius.circular(25.0),
 child: InkWell(
  splashColor: Colors.blue,
  borderRadius: BorderRadius.circular(25.0),
  child: Text('Button'),
 ),
),

score 3 · Answer 3 · answered Oct 22 '19 at 06:27

To change the InkWell's shape to rounded from standard square shape, Material's borderRadius property is used. Example code is given below -

floatingActionButton: FloatingActionButton(
            backgroundColor: Colors.green,
            child: Material(
              color: Colors.yellow,
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              child: InkWell(
                child: PopupMenuButton(
                  //shape is used to change the shape of popup card 
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
                  child: Icon(Icons.mode_edit, size: 22.0, color: Colors.red,),
                  itemBuilder: (context) => [
                    PopupMenuItem(
                      child: Text("Child 1"),
                    ),
                    PopupMenuItem(
                      child: Text("Child 2"),
                    ),
                  ],
                ),
              ),
            ),
          ),

Thanks!!! It's working with: ```shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0))``` — Rebar, Jan 20 '20 at 15:33

score 0 · Answer 4 · answered May 08 '20 at 12:06

I faced a similar issue where the child of the PopupMenuButton would have a square InkWell around it.

In order to make it behave like an IconButton, which naturally uses the rounded InkWell, I simply had to use the icon paramater instead of the child.

icon: Icon(Icons.more_vert),

This is indicated in the documentation for that paramater:

  /// If provided, the [icon] is used for this button
  /// and the button will behave like an [IconButton].
  final Widget icon;

Mr Yuksel · Answer 5 · 2022-09-27T12:02:19.407

Wrap the Inkwell with Material. Add Border Radius

Material(
                
                borderRadius: BorderRadius.all( // add
                  Radius.circular(20) 
                ),
                child: InkWell(
                  child: Ink(
                    padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                    child: Text(
                      "Kayıt Ol",
                      
                      style: TextStyle(
                        color: cKutuRengi,
                      ),
                    ),
                  ),
                ),
              )

Here's how to make the tap effect look right

Material(
                
                borderRadius: BorderRadius.all(
                  Radius.circular(20)
                ),
                child: InkWell(
                  customBorder:RoundedRectangleBorder( // add
                    borderRadius: BorderRadius.all(
                      Radius.circular(20)
                    )
                  ),
                  onTap: () {
                    debugPrint("on tap");
                  },
                  child: Ink(
                    
                    padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                    child: Text(
                      "Kayıt Ol",
                      
                      style: TextStyle(
                        color: cKutuRengi,
                      ),
                    ),
                  ),
                ),
              )

score 0 · Answer 6 · answered Dec 28 '22 at 22:57

Most of the answers here are not using PopupMenuButton like the question specified. If you're simply using an icon child then you can use the icon property rather than child as already explained above, but if you want rounded corners on some other child, you wrap it with a Material, and wrap that with a ClipRRect See this Stackoverflow

Flutter: how can I make a rounded PopupMenuButton's InkWell?

6 Answers6