So, someone asked how they can create a rounded button in Flutter, It should have circular edges, Here are different ways on how you can easily create a rounded button in flutter.
Question:
I’m currently developing an Android app in Flutter. How can I add a rounded button?
Answer 1 (Best Answer):
1. Solution Summary
You can use shape for FlatButton and RaisedButton.
2. Rounded Button
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(18.0), side: BorderSide(color: Colors.red) ),
Square Button
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0.0), side: BorderSide(color: Colors.red) ),
Complete Example
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)),
color: Colors.white,
textColor: Colors.red,
padding: EdgeInsets.all(8.0),
onPressed: () {},
child: Text(
"Add to Cart".toUpperCase(),
style: TextStyle(
fontSize: 14.0,
),
),
),
SizedBox(width: 10),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)),
onPressed: () {},
color: Colors.red,
textColor: Colors.white,
child: Text("Buy now".toUpperCase(),
style: TextStyle(fontSize: 14)),
),
],
)Answer 2:
There are many ways of doing it. I am listing few here.
(1) Using RoundedRectangleBorder
RaisedButton(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
onPressed: () {},
child: Text("Button"),
)(2) Using ClipRRect
ClipRRect(
borderRadius: BorderRadius.circular(40),
child: RaisedButton(
onPressed: () {},
child: Text("Button"),
),
)(3) Using ClipOval
ClipOval(
child: RaisedButton(
onPressed: () {},
child: Text("Button"),
),
)(4) Using ButtonTheme
ButtonTheme(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
child: RaisedButton(
onPressed: () {},
child: Text("Button"),
),
)(5) Using StadiumBorder
RaisedButton(
shape: StadiumBorder(),
onPressed: () {},
child: Text("Button"),
)Answer 3:
You can simply use RaisedButton or you can use InkWell to get custom button and also properties like onDoubleTap, onLongPress and etc.:
new InkWell(
onTap: () => print('hello'),
child: new Container(
//width: 100.0,
height: 50.0,
decoration: new BoxDecoration(
color: Colors.blueAccent,
border: new Border.all(color: Colors.white, width: 2.0),
borderRadius: new BorderRadius.circular(10.0),
),
child: new Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
),
),
If you want to use splashColor, highlightColor properties in InkWell widget, use Material widget as the parent of InkWell widget instead of decorating the container(deleting decoration property).
Answer 4:
You can create a custom view and put it inside a GestureDetector for it to behave like a button. The benefit is that you can provide endless types of custom decoration (including making it round with specified radius) to the container.
