How to Create a Rounded Button in Flutter?

· 3 min read
Rounded Button In Flutter
Rounded Button In Flutter

What is Button in a Flutter?

The Button is a user interface control that is used to perform an action whenever the user clicks or tap on it. In this article, we will get into how to Create a Rounded Button in Flutter?

Basically there are three types of Buttons in  Flutter as listed below.

How to Create a Rounded Button in Flutter?

  • Using Shape Property

We can use the Shape Property for FlatButton Widget and RaisedButton Widget. The code snippet will look like below:

shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(18.0),
  side: BorderSide(color: Colors.red)
),

If the user wishes to make it a square button code snippet will look like below:

shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(0.0),
  side: BorderSide(color: Colors.red)
),
  • Using ClipRRect Widget

The code snippet will look like below:

ClipRRect(
  borderRadius: BorderRadius.circular(40),
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)
ClipOval(
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)
  • Make use of ButtonTheme
ButtonTheme(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)
  • With StadiumBorder
RaisedButton( 
    shape: StadiumBorder(), 
    onPressed: () {}, 
    child: Text("Button"),
    )

If the user wants to set any type of styling & set decoration put that widget into the Container Widget, that provides many properties to decoration.

Center(
      child: Container(
      height: 50,
      padding: EdgeInsets.all(10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
      color: Colors.blueAccent,
      borderRadius: BorderRadius.circular(30),
       ),
      child: Text("Click",
      style: Theme.of(context).textTheme.caption.copyWith(
       color: Colors.white,
       fontSize: 20,
       fontWeight: FontWeight.w500,
          ),
         ),
      ),
  ),

Our Output will look like below:

Rounded Button in Flutter
Rounded Button in Flutter

Conclusion:

In this article, we have learned about How to create a Rounded Button in Flutter.

Thanks for Reading!!!
Keep Learning.

Do let us know if you need any assistance with Flutter?

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply