如何在 Flutter 上為 MaterialButton 設置圓角邊框？

Question

我正在嘗試為我的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;
          });
        },
      ),
    );
  }

結果：

Answer 1

如果您需要使用MaterialButton() - 您需要使用Material Widget 扭曲按鈕，以獲得所需的行為。

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

輸出：

更新：

  minWidth: 200.0,
  height: 95,

Answer 2

您是否嘗試將其包裝在ClipRRect()中？

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

您可以在此處找到文檔： ClipRRect()

Answer 3

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

RoundedRectangleBorder 會幫助你https://api.flutter.dev/flutter/painting/RoundedRectangleBorder-class.html

Answer 4

您應該設置 MaterialButton 的形狀和 Material 的borderRadius 以使其即使在動畫選項卡時也是圓形的：

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