How to set rounded border to a MaterialButton on Flutter? - 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:

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:
UPDATE:
minWidth: 200.0,
height: 95,

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

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

Answer 4

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