我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
你可以创建一个自定义的视图,并把它放在一个姿态检测器中,让它表现得像一个按钮。这样做的好处是,您可以为容器提供无尽的自定义装饰类型(包括使其具有指定半径的圆形)。
其他回答
在新的更新颤振3.0颤振使用材料3指南。
根据它,按钮的默认边框被四舍五入。
默认按钮
ElevatedButton(
onPressed: () {}, child: const Text("Default Button ")),
边界半径为零的按钮
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.zero)),
onPressed: () {},
child: const Text("Border Radius Zero ")),
带有自定义边界半径的按钮
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50))),
onPressed: () {},
child: const Text("Border Radius Custom ")),
注意:你可以对FilledButton, TextButton等使用相同的逻辑。
按钮样式请参考https://m3.material.io/components/all-buttons。
这里有另一个解决方案:
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)),
),
),
),
),
您可以使用ElevatedButton小部件。提升的按钮小部件有一个shape属性,您可以使用该属性,如下面的代码片段所示。
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(
color: Colors.teal,
width: 2.0,
),
),
),
),
child: Text('Submit'),
onPressed: () {},
),
圆边颜色容器:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red),
),
child: Text("Some Text"),
)
另一个很酷的解决方案在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');
},
),