close

How to Create a rounded button / button with border-radius in Flutter

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, RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter

Here We have many methods to create rounded buttons or buttons with border radius in a flutter. we are going to learn all methods one by one. Let’s start this tutorial on How to Create a rounded button / button with border-radius in Flutter.

  1. Create a Rounded button using RaisedButton.
  2. Create a Rounded button using FlatButton.
  3. Create a Rounded button using GestureDetector.
  4. Create a Rounded button using ClipRRect.
  5. Create a Rounded button using ClipOval.
  6. Create a Rounded button By using StadiumBorder.
  7. Create a Rounded button with InkWell
  8. Create a Rounded button with OutlinedButton
  • 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.

Question: How to Create a rounded button in flutter ?
Answer: to create rounded buttons or buttons with border-radius in a flutter. we are going to learn all methods one by one. Let’s start this tutorial on How to Create a rounded button/button with border radius in Flutter.

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, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter

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, RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter

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.
GestureDetector, RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter

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, RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter

Rounded button using ClipOval

  • We can also use ClipOval Widget. you can customise this button by its clipper property.
ClipOval, RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter

Create a Rounded button By using StadiumBorder

  • We can also use RaisedButton Widget. RaisedButtonWidget has shape: StadiumBorder Property. which we can utilise as shown in below code.
StadiumBorder, RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter

Create a Rounded button with InkWell

  • We can also use InkWell Widget. InkWell has Decoration Property. which we can utilise as shown in below code.
RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter, inkWell

Create a Rounded button with OutlinedButton

We can also use OutlinedButton has style property and you can give shape to style. as shown in below code.

Create a Rounded button with OutlinedButton
  • I am Providing Full Source Code here of this my main.dart file Here.

Summery

So, It’s All About How to Create a rounded button / button with border-radius in Flutter ?. I hope this tutorial helps you to add Borders to your Widget. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

1 thought on “How to Create a rounded button / button with border-radius in Flutter”

Leave a Comment

%d bloggers like this: