如何在Flutter上为MaterialButton设置圆角边框?

Aug*_*sto 1 widget dart material-ui flutter

我正在尝试将圆角边框设置为我的圆角边框MaterialButton,要设置RoundedRectangleBorder形状属性的MaterialButton,问题是它没有效果。

码:

  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;
          });
        },
      ),
    );
  }
Run Code Online (Sandbox Code Playgroud)

结果:

在此处输入图片说明

A J*_*A J 9

MaterialButton(
        child: Text('My Button'),
        height: 40,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
)
Run Code Online (Sandbox Code Playgroud)

RoundedRectangleBorder 会帮助你https://api.flutter.dev/flutter/painting/RoundedRectangleBorder-class.html


anm*_*ail 6

如果需要使用MaterialButton()-您需要使用MaterialWidget 扭曲按钮以获得所需的行为。

    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;
//          });
          },
        ),
      ),
    );
  }
Run Code Online (Sandbox Code Playgroud)

输出: 在此处输入图片说明

更新:

  minWidth: 200.0,
  height: 95,
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

  • 他们很可能会在未来的更新中将其从 MaterialButton 中删除。 (2认同)
  • 它现在可以工作了...但是如果高度> 30.0它就可以工作。例如,如果“height = 10.0”,则不会发生变化...... (2认同)