web-dev-qa-db-ja.com

FlutterのMaterialButtonに丸い境界線を設定するにはどうすればよいですか？

丸みを帯びた境界線を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;
          });
        },
      ),
    );
  }

結果：

enter image description here

dartflutterwidgetmaterial-ui
2
Augusto

MaterialButton()を使用する必要がある場合-目的の動作を得るには、ボタンをMaterialウィジェットでワープする必要があります。

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

出力： enter image description here

更新：

  minWidth: 200.0,
  height: 95,

enter image description here

6
anmol.majhail

ClipRRect()でラップしてみましたか？

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

ここでドキュメントを見つけることができます： ClipRRect（）

0
Robin Reiter