CODEWITHSUNDEEP
flutter
Daniel Oliveira
Daniel Oliveira

Reputation: 8993

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

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

Upvotes: 24

Views: 19168

Answers (8)

Daniq
Daniq

Reputation: 11

If you have rounded child but inkwell isnt rounded when hovered or longtapped, then use

customBorder

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      customBorder: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      onTap: () {},
      child: Container(),
    );
  }
}

Upvotes: 1

Aswanath C K
Aswanath C K

Reputation: 51

If you need the child of PopUpMenuButton to have border radius you can do like this.

return ClipRRect(
      clipBehavior: Clip.hardEdge,
      borderRadius: BorderRadius.circular(6.0),
      child: Material(
        type: MaterialType.transparency,
        child: PopupMenuButton(),
     )
);

This piece of code will help you to have a bordered radius inkwell. This solution has already mentioned in the official Flutter documentation.

Upvotes: 2

Matt Ireland
Matt Ireland

Reputation: 261

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

Upvotes: 0

Mr Yuksel
Mr Yuksel

Reputation: 21

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

Upvotes: 0

Firosh Vasudevan
Firosh Vasudevan

Reputation: 811

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

Upvotes: 26

madscs
madscs

Reputation: 11

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;

Upvotes: 0

zfnadia
zfnadia

Reputation: 341

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

Upvotes: 3

Dyvoker
Dyvoker

Reputation: 2789

Use customBorder property of InkWell:

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

Upvotes: 58

Related Questions