Hello Guys, How are you all ? hope you all are fine. In this tutorial we are going to learn How to Create a rounded button / button with border-radius in Flutter.
In Flutter there is Always more than 1 way to make any thing in flutter. So In todays Tutorial We will Learn All Possible way to make button with border-radius in Flutter.
How to Create a rounded button / button with border-radius in Flutter.
We have Many Method to for rounded button / button with border-radius in Flutter. I am Providing here most of method here with Source Code And Example.
Create a Rounded button using RaisedButton
Here We can use the RaisedButton Widget. Raised Button Widget has shape property which we can utilise as shown in below code.
RaisedButton(
textColor: Colors.white,
color: Colors.black,
child: Text("RaisedButton"),
onPressed: () {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
Method To Create a Rounded button using FlatButton
Here We can use the FlatButton Widget. FlatButton Widget has Also shape property which we can utilise as shown in below code.
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
onPressed: () {},
child: Text("FlatButton"),
),
How To Create a Rounded button using GestureDetector
We can also use GestureDetector Widget. GestureDetector Widget has Decoration Property. which we can utilise as shown in below code.
Container(
height: 50.0,
child: GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
),
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(
"GestureDetector",
style: TextStyle(
color: Colors.black,
fontFamily: 'Montserrat',
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: 1,
),
),
)
],
),
),
),
),
Method To Create a Rounded button using ClipRRect
We can also use ClipRRect Widget. ClipRRect Widget has borderRadius Property. which we can utilise as shown in below code.
ClipRRect(
borderRadius: BorderRadius.circular(40),
child: RaisedButton(
color: Colors.black,
onPressed: () {},
child: Text(
"ClipRRect",
style: TextStyle(color: Colors.white),
),
),
),
I am Providing Full Source Code here of this my main.dart file Here. Here Is My File How to Create a rounded button / button with border-radius in Flutter
Top comments (0)