我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?


当前回答

如果你想使用MaterialButton,

=======================================

你可以添加RoundedRectangleBorder,就像这样,


MaterialButton(
  onPressed: () {},
  minWidth: MediaQuery.of(context).size.width * 0.4,
  height: 34,
  color: colorWhite,
  highlightColor: colorSplash,
  splashColor: colorSplash,
  visualDensity: VisualDensity.compact,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(4),
    side: BorderSide(
      color: colorGrey,
      width: 0.6,
    ),
  ),
  child: Text("CANCEL"),
),

其他回答

你可以创建一个自定义的视图,并把它放在一个姿态检测器中,让它表现得像一个按钮。这样做的好处是,您可以为容器提供无尽的自定义装饰类型(包括使其具有指定半径的圆形)。

通过将一个透明的颜色传递给BoxDecoration中的color属性,可以将此代码用于一个透明的圆形按钮。 如。颜色:Colors.transparent。 另外,请注意这个按钮只使用Container和GestureDetector小部件。

Container(
    height: 50.0,
    child: GestureDetector(
        onTap: () {},
        child: Container(
            decoration: BoxDecoration(
                border: Border.all(
                    color: Color(0xFFF05A22),
                    style: BorderStyle.solid,
                    width: 1.0,
                ),
                color: Colors.transparent,
                borderRadius: BorderRadius.circular(30.0),
            ),
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Center(
                        child: Text(
                           "BUTTON",
                            style: TextStyle(
                                color: Color(0xFFF05A22),
                                fontFamily: 'Montserrat',
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                letterSpacing: 1,
                            ),
                        ),
                    )
                ],
            ),
        ),
    ),
)

另一个很酷的解决方案在2021年也适用:

TextButton(
    child: Padding(
        padding: const EdgeInsets.all(5.0),
        child: Text('Follow Us'.toUpperCase()),
    ),
    style: TextButton.styleFrom(
        backgroundColor: Colors.amber,
        shadowColor: Colors.red,
        elevation: 2,
        textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(5.0),)
    ),
    onPressed: () {
        print('Pressed');
    },
),

使用Flutter版本2,请尝试以下操作

ElevatedButton(
    style: ButtonStyle(
        shape: MaterialStateProperty.all<OutlinedBorder>(
            RoundedRectangleBorder(
                side:
                    BorderSide(width: 1.0, color: Colors.red,
                borderRadius:
                    BorderRadius.circular(5.0),),),
        backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.green),
        elevation:
            MaterialStateProperty.all<double>(8.0),
        padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
            const EdgeInsets.symmetric(
                horizontal: 15.0,
                vertical: 10.0),),),
    onPressed: (){},
    child: Text('Button'),)

这里有另一个解决方案:

Container(
    height: MediaQuery.of(context).size.height * 0.10,
    width: MediaQuery.of(context).size.width,
    child: ButtonTheme(
        minWidth: MediaQuery.of(context).size.width * 0.75,
        child: RaisedButton(
            shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(25.0),
                side: BorderSide(color: Colors.blue)),
                onPressed: () async {
                    // Do something
                },
                color: Colors.red[900],
                textColor: Colors.white,
                child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text("Button Text,
                    style: TextStyle(fontSize: 24)),
            ),
        ),
    ),
),