我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
圆边颜色容器:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red),
),
child: Text("Some Text"),
)
其他回答
如果你想使用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"),
),
这里有另一个解决方案:
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)),
),
),
),
),
要在按钮中使用任何形状,请确保执行button小部件内的所有代码:
**shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red) ),**
如果你想让它变成正方形,使用BorderRadius.circular(0.0),它会自动把它变成正方形。
按钮是这样的:
下面是给出UI屏幕的所有源代码:
Scaffold(
backgroundColor: Color(0xFF8E44AD),
body: new Center(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(90, 10, 20, 0),
padding: new EdgeInsets.only(top: 92.0),
child: Text(
"Currency Converter",
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Container(
margin: EdgeInsets.only(),
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "Amount",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
Container(
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "From",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
Container(
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "To",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
)),
),
),
SizedBox(height: 20.0),
MaterialButton(
height: 58,
minWidth: 340,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(12)),
onPressed: () {},
child: Text(
"CONVERT",
style: TextStyle(
fontSize: 24,
color: Colors.black,
),
),
color: Color(0xFFF7CA18),
),
],
),
),
),
);
你也可以使用ButtonTheme():
下面是示例代码
ButtonTheme(
minWidth: 200.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.green)),
child: RaisedButton(
elevation: 5.0,
hoverColor: Colors.green,
color: Colors.amber,
child: Text(
"Place Order",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
onPressed: () {},
),
),
试试这个:
SizedBox(
height: 40.0,
child: MaterialButton(
child: Text("Button"),
color: Colors.blue,
disabledColor: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0), // Change your border radius here
),
),
onPressed: () {},
),
),