There are multiples ways to implement round corner button in the Flutter
RaisedButton with border radius
The easiest way to add round button in flutter is use raised button with shape property to set radius.
RaisedButton(
onPressed: () {},
color: Colors.amber,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Text("Click This"),
)
Flat button with border radius
Like the raisedbutton you can set shape property to flat button also
FlatButton(
onPressed: () {},
color: Colors.amber,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Text("Click This"),
)
Convert container to button
In Flutter you can wrap widget inside the GestureDetector widget and it contain different property to handle tap, double tap etc.
GestureDetector(
onTap: () {},
child: Container(
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blue),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Click",textAlign: TextAlign.center,),
),
),
)
Change border color and width of button
In the RoundedRectangleBorder class containt property called side and you can set width and color using that
RaisedButton(
onPressed: () {},
color: Colors.amber,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.red,width: 2),
borderRadius: BorderRadius.circular(10)),
child: Text("Click This"),
)
Conclusion
I hope you get an idea about how to Create a rounded button with border-radius in Flutter and If you have any question please add a comment below.