How to create an ElevatedButton with Rounded Corners in Flutter

We already know how to add an ElevatedButton in flutter. A button with rounded corners is always beautiful to see. In this blog post, let’s check how to create an Elevated Button with rounded corners in Flutter.

The style parameter and the styleFrom method should be used to create custom styles for the ElevatedButton. The RoundedRectangleBorder class and BorderRadius class help us to define border-radius to create rounded corners. See the code snippet given below.

ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0),
                  ),
                ),
                child: const Text(' Elevated Button'))

You will get the following output.

Following is the complete example of ElevatedButton with rounded corners in Flutter.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('ElevatedButton Rounded Corner Example'),
        ),
        body: Center(
            child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0),
                  ),
                ),
                child: const Text(' Elevated Button'))));
  }
}

That’s how you add rounded corners to ElevatedButton in Flutter. You may also check out how to add ElevatedButton border and change border color.

I hope you understood how to create ElevatedButton with rounded corners in Flutter.