Flutter：如何制作圆形 PopupMenuButton 的 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?

Answer 1

Use customBorder property of InkWell :

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

Answer 2

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

Answer 3

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

Answer 4

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;

Answer 5

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

Answer 6

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