How to set rounded border to a MaterialButton on Flutter?

Question

I'm trying set rounded border to my MaterialButton, to do it I'm setting a RoundedRectangleBorder to shape attribute's MaterialButton, the problem is that it's not have effect.

Code:

 Widget _showNeedHelpButton() {
 return new Padding( 
 padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
 child: new MaterialButton(
 shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
 elevation: 5.0,
 minWidth: 200.0,
 height: 35,
 color: Color(0xFF801E48),
 child: new Text('Preciso de ajuda',
 style: new TextStyle(fontSize: 16.0, color: Colors.white)),
 onPressed: () {
 setState(() {
 _isNeedHelp = true;
 });
 },
 ),
 );
 }

Result:

enter image description here

• user1462442: May I ask how much your question differs from this problem? stackoverflow.com/questions/47423297/…
• Augusto: The MaterialButton Widget have a shape attribute, and I want use it, not other widget like Container.

Answer 1

If you need to use MaterialButton() - You need to Warp the button with Material Widget, to get the desired behavior.

 Widget _showNeedHelpButton() {
 return Padding(
 padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
 child: Material( //Wrap with Material
 shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(22.0) ),
 elevation: 18.0,
 color: Color(0xFF801E48),
 clipBehavior: Clip.antiAlias, // Add This
 child: MaterialButton(
 minWidth: 200.0,
 height: 35,
 color: Color(0xFF801E48),
 child: new Text('Preciso de ajuda',
 style: new TextStyle(fontSize: 16.0, color: Colors.white)),
 onPressed: () {
// setState(() {
// _isNeedHelp = true;
// });
 },
 ),
 ),
 );
 }

Output: enter image description here

UPDATE:

 minWidth: 200.0,
 height: 95,

enter image description here

• Augusto: Why shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(22.0) ) not works without wrap?
• anmol.majhail: most likely they will remove it from the MaterialButton in future updates.
• Augusto: I can change height and width?
• anmol.majhail: @Augusto what doesn't work - ? i used height & width. worked fine. i even updated answer.
• Augusto: it's works now... But it works if height > 30.0. if height = 10.0 for example, not changes happens...

Answer 2

MaterialButton(
 child: Text('My Button'),
 height: 40,
 shape: RoundedRectangleBorder(
 borderRadius: BorderRadius.circular(10.0),
 ),
)

RoundedRectangleBorder will help you https://api.flutter.dev/flutter/painting/RoundedRectangleBorder-class.html

Answer 3

You should set the shape for MaterialButton and borderRadius for Material to make it round even when animation tab:

Material(
 elevation: 10.0,
 borderRadius: BorderRadius.circular(30.0),//12
 color: Colors.transparent,//Colors.cyan.withOpacity(0.5),
 child: MaterialButton(
 minWidth: MediaQuery.of(context).size.width,
 color: Colors.cyan.withOpacity(0.7),
 shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(30.0) ),
 splashColor: Colors.cyan,
 onPressed: () async {},
 child: Text('Login',
 textAlign: TextAlign.center,
 style: TextStyle(
 fontSize: 18.0,
 color: Colors.black,
 fontWeight: FontWeight.w400,
 //fontFamily: lang.font
 )),
 ),
);

Answer 4

Have you tried wrapping it within a ClipRRect() ?

ClipRRect(
 borderRadius: BorderRadius.all(Radius.circular(20.0)),
 child: MaterialButton(...),
),

You can find the documentation here: ClipRRect()

• Augusto: There are infinte ways to make a border radius circular, I want use shape attribute of MaterialButton.
• Robin Reiter: You probably have to go for a workaround as this seems to be an unfixed issue with flutter. [github.com/flutter/flutter/issues/24225](Github #24225) What is the reason for sticking with MaterialButton() ?