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:

May I ask how much your question differs from this problem? https://stackoverflow.com/questions/47423297/how-do-i-add-a-border-to-a-widget-in-flutter/47424036#47424036 — user1462442, Feb 22 '19 at 13:48
The `MaterialButton` Widget have a `shape` attribute, and I want use it, not other widget like `Container`. — Augusto, Feb 22 '19 at 13:49

anmol.majhail · Accepted Answer · 2019-02-22T17:06:15.900

31

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,

edited Feb 22 '19 at 17:06

answered Feb 22 '19 at 16:03

anmol.majhail

48,256
14
136
105

Why `shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(22.0) )` not works without wrap? – Augusto Feb 22 '19 at 16:20
1

most likely they will remove it from the MaterialButton in future updates. – anmol.majhail Feb 22 '19 at 16:29
I can change height and width? – Augusto Feb 22 '19 at 16:43
@Augusto what doesn't work - ? i used height & width. worked fine. i even updated answer. – anmol.majhail Feb 22 '19 at 17:05
1

it's works now... But it works if height > 30.0. if `height = 10.0` for example, not changes happens... – Augusto Feb 22 '19 at 17:14
add - `materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,` in button – anmol.majhail Feb 22 '19 at 17:47

score 8 · Answer 2 · answered Mar 05 '22 at 13:12

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

score 2 · Answer 3 · answered Feb 22 '19 at 13:57

2

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

answered Feb 22 '19 at 13:57

Robin Reiter

2,281
15
24

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

score 2 · Answer 4 · answered Jun 11 '22 at 15:44

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

How to set rounded border to a MaterialButton on Flutter?

4 Answers4