How to Add Circular Elevated Button in Flutter

In this example, we are going to show you how to add border radius to ElevatedButton() and make it circular or its corner circular. Circular Elevated Buttons looks beautiful and you may need them while building your flutter app. See the example below:

Previously, we have described how to change background color, size, border, border-radius of Elevated Button, check it out.

ElevatedButton(
      onPressed: (){}, 
      child: Text("Elevated Button with Border Radius"),
      style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30),
            )
      ),
)

You can add Border radius to Elevated button by applying style on "style" attribute of Elevated Button like above.

ElevatedButton(
      onPressed: (){}, 
      child: Text("Elevated Button with Radius on Corner"),
      style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only( 
                  topLeft: Radius.circular(20),
                  topRight: Radius.elliptical(10, 40)
                  //  bottomLeft:, bottom left
                  // bottomRight: bottom right
              )
            )
      ),
)

You can add border radius to specific corner of Elevated Button like above. You can add two kinds of border radius, i.e. circular and elliptical. See the output below of this code.

SizedBox(
  height:100,width: 100,
  child:ElevatedButton(
    onPressed: (){}, 
    child: Icon(Icons.person),
    style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(50), 
            //border radius equal to or more than 50% of width
          )
    ),
  )
)

To make a perfect circular Elevated Button, you need to make height and width equal. Here, we resize the Elevated Button with SizedBox() widget. After that, we apply border radius equal to or more than 50% of height or width.

import 'package:flutter/material.dart';
Future<void> main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          body: Container(
            padding: EdgeInsets.all(60),
            alignment: Alignment.center,
            child: Column(children: [
                 SizedBox(
                   height:100,width: 100,
                   child:ElevatedButton(
                      onPressed: (){}, 
                      child: Icon(Icons.person),
                      style: ElevatedButton.styleFrom(
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(50), 
                              //border radius equal to or more than 50% of width
                            )
                      ),
                    )
                 ),

                 Divider(),

                ElevatedButton(
                      onPressed: (){}, 
                      child: Text("Elevated Button with Border Radius"),
                      style: ElevatedButton.styleFrom(
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(30),
                            )
                      ),
                ),

                ElevatedButton(
                      onPressed: (){}, 
                      child: Text("Elevated Button with Radius on Corner"),
                      style: ElevatedButton.styleFrom(
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.only( 
                                  topLeft: Radius.circular(20),
                                  topRight: Radius.elliptical(10, 40)
                                  //  bottomLeft:, bottom left
                                  // bottomRight: bottom right
                              )
                            )
                      ),
                ),
                 
            ],)
          )
       );
  }
}

In this way, you can apply border radius to Elevated Button and make it circular in Flutter.

No any Comments on this Article


Please Wait...