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


当前回答

addButton() {
return Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.symmetric(vertical: 10.0),
      child: SizedBox(
        height: 45,
        width: 200,
        child: ElevatedButton.icon(
          onPressed: () async {},
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0),
                  )),
            elevation: MaterialStateProperty.all(1),
            backgroundColor: MaterialStateProperty.all(Colors.blue),
          ),
          icon: Icon(Icons.add, size: 18),
          label: Text("Add question"),
        ),
      ),
    ),
  ],
);

}

其他回答

另一个很酷的解决方案在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');
    },
),

你可以使用下面的代码:

ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(borderRadius))),
      ),
      child: Text("ok"),
    )
     Container(
        width: yourWidth,
        height: yourHeight ,
        decoration: BoxDecoration(
            borderRadius: radius,
            gradient: yourGradient,
            border: yourBorder),
        child: FlatButton(
          onPressed: {} (),
          shape: RoundedRectangleBorder(borderRadius: radius),
    .......

用同样的半径。

使用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'),)

如果你使用材质应用程序作为你的主小部件,你总是可以使用材质按钮。

Padding(
  padding: EdgeInsets.symmetric(vertical: 16.0),
  child: Material(
    borderRadius: BorderRadius.circular(30.0),//Set this up for rounding corners.
    shadowColor: Colors.lightBlueAccent.shade100,
    child: MaterialButton(
      minWidth: 200.0,
      height: 42.0,
      onPressed: (){//Actions here//},
      color: Colors.lightBlueAccent,
      child: Text('Log in', style: TextStyle(color: Colors.white),),
    ),
  ),
)