[Example] - Rounded elevated button in Flutter

Table of Contents

There are many of ways we can make the Rounded Button a flutter. here in this quick tutorial, we will see how to make flutter Elevated button with example code.

First, we will take a look at how we can make the Rounded Button using an Elevated button widget like The image Shown below:

Rounded Button with Elevated widget:

In your project Create an Elevated Button By adding this widget ElevatedButton().

ElevatedButton(
            child: 
            onPressed:
          ),

In this widget, there are two required fields that we need to pass and actually, for a button it Is important

onPressed and Child, Where chile could be a text widget and on onPressed we need to pass the callback function so that we can perform some Action while clicking that Button.

So now to make it rounded we need to add style Property Just like we do with the Container widget.

ElevatedButton(
            child: Text("Click Here")
            onPressed: (){}

            style: ElevatedButton.styleFrom(
       
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12.0)),
            ),


          ),

Further Style Property takes ButtonStyle and we passed ElevatedButton which has a function styleFrom(). Ad StyleForm() has shape Property and we can pass RoundedRectangleBorder() and again it has borderRadius Property

Just like we provide BorderRadious to Containers in the BoxDecoration same is the case with RoundedRectangleBorder. Provide borderRadious as Given Below

 RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12.0)),
            ),

And you can see your Expected result.

Full Code:

ElevatedButton(
            style: ElevatedButton.styleFrom(
              padding: const EdgeInsets.symmetric(horizontal: 25.0, vertical: 16.0),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12.0)),
            ),
            child: const Text(
              "Click Here",
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
            ),
            onPressed: () {},
          ),

Other Shapes we can make with Elevated Button

We can even make the Other Shapes of Elevated button:

In ElevatedButton.styleFrom() In shape property we need to pass BeveledRectangleBorder for BEVELLED Shaper and for Capsule-shape pass StadiumBorder() Here the code for all three.

Button 1:

  ElevatedButton(
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(horizontal: 25.0, vertical: 16.0),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12.0)),
                ),
                child: const Text(
                  "Click Here",
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
                ),
                onPressed: () {},
              ),

Button 2:

     ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(horizontal: 25.0, vertical: 16.0),
                    shape: BeveledRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0)),
                    primary: Colors.deepPurple),
                child: Text(
                  "Click Me",
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
                ),
              ),

Button 3:

   ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(horizontal: 25.0, vertical: 16.0),
                  primary: Colors.deepPurpleAccent,
                  shape: StadiumBorder(),
                ),
                child: Text(
                  "Click Me",
                  style:TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
                ),
              ),

Other ways to Make Rounded buttons in Flutter

Using Container widget

Just create a Container with color and Border Radios Property in its Decoration and Add the text widget to its child. Even add some padding to make it looks like Button.

Container(
                padding: EdgeInsets.symmetric(vertical: 16.0,horizontal: 25.0),
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: Text("Click Me",style: TextStyle(color: Colors.white),),
              ),

Above is the code for the design,

Now make that container Clickable so that we can use it as a Button.

Wrap the Container widget with the GestureDetector widget which will give us OnTap and other clickable properties. we need onTap to make our container clickable.

        GestureDetector(
                onTap: (){},
                child: Container(
                  padding: EdgeInsets.symmetric(vertical: 16.0,horizontal: 25.0),
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  child: Text("Click Me",style: TextStyle(color: Colors.white),),
                ),
              ),

Using Material Widget:

Create a Material widget and add Text to the child of it with the text you want. The material widget comes with borderRadious Property add that for rounder corners. Also, wrap the Text widget with a padding widget so that it has some space to click on.

Again Wrap the Material Widget with the GestureDetector() with onTap.

  GestureDetector(
                onTap: (){},
                child: Material(
                  borderRadius: BorderRadius.circular(10.0),
                  color: Colors.lightBlue,
                  child: Padding(
                    padding: EdgeInsets.symmetric(vertical: 16.0,horizontal: 25.0),
                    child: Text("Click Me", style: TextStyle(color: Colors.white),),
                  ),
                ),
              )

And yes there are other ways to make a rounder button, even if you guys know let us know in the comments.

Post by: Hemunt Sharma (More Info)

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com

Flutter elevated Rounded Button with [Example Code]