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.