Flutter Create Rounded Shape ElevatedButton

Creating exact round shape ElevatedButton is very simple and easy in flutter. There are only 3 factor we need to calculate in mind and whoops magic happens. These 3 factors are width of button, height of button and button corner radius. Now to make button exact in circle shape we have define width and height same and border radius should be their half value.

For example: If you are creating rounded button with width 100 and height 100 then the radius property value should be 60.

Flutter Create Rounded Shape ElevatedButton:

1. Creating ElevatedButton with 120 pixels width and 120 pixels height using Size(width, height) method. We are applying radius with half of 120 which is 60 to BorderRadius.circular(60) to make the button in rounded shape.

ElevatedButton(
        style: ElevatedButton.styleFrom(
            fixedSize: const Size(120, 120),
            backgroundColor: const Color(0xffFF1744),
            textStyle: const TextStyle(fontSize: 21),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(60),
            )),
        onPressed: temp,
        child: const Text(
          'Round Button',
          textAlign: TextAlign.center,
        ),
      ),

2. Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  void temp() {
    print('Clicked...');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
            fixedSize: const Size(120, 120),
            backgroundColor: const Color(0xffFF1744),
            textStyle: const TextStyle(fontSize: 21),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(60),
            )),
        onPressed: temp,
        child: const Text(
          'Round Button',
          textAlign: TextAlign.center,
        ),
      ),
    ))));
  }
}

Screenshot: