Flutter Elevated Button With Rounded Corners – 5 Examples

Buttons play a crucial role in every UI, and the standard rectangular shape can sometimes feel outdated. In this post, you’ll learn how to create an ElevatedButton with rounded corners.

It’s simple, with a few different ways to achieve the effect. Available since Flutter 1.22, ElevatedButton replaces the older RaisedButton.

So, let’s jump right in!

Flutter ElevatedButton With Rounded Corners

Let’s start with a simple one. we will change the style of ElevatedButton using style property.

• We can use ElevatedButton.styleFrom() and provide RoundedRectangleBorder as shape property value.
• BorderRadius.circular(value) creates rounded corner in each side.

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

• Flutter Notes App Tutorial
• Flutter AnimatedIcon Example

ElevatedButton With Rounded Corners – StadiumBorder shape

I am already discussed about StadiumBorder in detail.

• Using StadiumBorder, we can easily make stadium shaped Button.
• Inside ElevatedButton.styleFrom(), Use shape property and give StadiumBorder() as value.
• That’s enough, you can change color using primary property.

ElevatedButton(
                onPressed: () {},
                child: const Text('Elevated Button - Stadium Border Shape'),
                style: ElevatedButton.styleFrom(
                  primary: Colors.red,
                  shape: StadiumBorder(),
                ),
              ),

Rounded ElevatedButton With Container

• In this example, I have increased ElevatedButton width using Container
• You can also increase or decrease height using height property.

Container(
                width: 350,
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text('Elevated Button'),
                  style: ElevatedButton.styleFrom(
                    primary: Colors.red,
                    shape: const StadiumBorder(),
                  ),
                ),
              ),

• Flutter Container Background Color
• Flutter Random Number Generator

Flutter ElevatedButton.icon With Rounded Corner

Here, we can make a rounded Elevatedbutton with icon. Just use ElevatedButton.icon() with your needed icon.

ElevatedButton.icon(
                onPressed: () {},
                icon: const Icon(Icons.access_alarm_rounded),
                label: const Text("Alarm"),
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30),
                  ),
                ),
              ),

ElevatedButton.icon with Container

Just like above example, we will use ElevatedButton.icon with Container just for additional width.

Container(
                width: 350,
                child: ElevatedButton.icon(
                  icon: Icon(Icons.alarm),
                  onPressed: () {},
                  label: const Text('Elevated Button'),
                  style: ElevatedButton.styleFrom(
                    primary: Colors.red,
                    shape: const StadiumBorder(),
                  ),
                ),
              ),

Using ClipRRect For Rounded Corners

As a final one, you can use ClipRRect with ElevatedButton. It gets rounded rectangle around the elevatedbutton.

ClipRRect(
                borderRadius: BorderRadius.circular(15),
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text('elevated button'),
                ),
              ),

ClipRRect with ElevatedButton.icon

based on the above demo, ElevatedButton.icon will covered with rounded rectangle.

ClipRRect(
                borderRadius: BorderRadius.circular(15),
                child: ElevatedButton.icon(
                  icon: Icon(Icons.alarm),
                  onPressed: () {},
                  label: Text('elevated button'),
                ),
              ),

Complete source code is given below.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter ElevatedButton With Rounded Corners'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {},
                child: const Text('Rounded Elevated Button'),
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30),
                  ),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              //stadiumborder
              ElevatedButton(
                onPressed: () {},
                child: const Text('Elevated Button - Stadium Border Shape'),
                style: ElevatedButton.styleFrom(
                  primary: Colors.red,
                  shape: const StadiumBorder(),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              //stadiumborder with container
              Container(
                width: 350,
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text('Elevated Button'),
                  style: ElevatedButton.styleFrom(
                    primary: Colors.red,
                    shape: const StadiumBorder(),
                  ),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              //rounded elevatedbutton with icon
              ElevatedButton.icon(
                onPressed: () {},
                icon: const Icon(Icons.access_alarm_rounded),
                label: const Text("Alarm"),
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30),
                  ),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              //stadium border with container + elevated icon
              Container(
                width: 350,
                child: ElevatedButton.icon(
                  icon: Icon(Icons.alarm),
                  onPressed: () {},
                  label: const Text('Elevated Button'),
                  style: ElevatedButton.styleFrom(
                    primary: Colors.red,
                    shape: const StadiumBorder(),
                  ),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              //cliprrect with elevatedbutton
              ClipRRect(
                borderRadius: BorderRadius.circular(35),
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text('elevated button'),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              //cliprrect with elevatedbutton.icon
              ClipRRect(
                borderRadius: BorderRadius.circular(35),
                child: ElevatedButton.icon(
                  icon: Icon(Icons.alarm),
                  onPressed: () {},
                  label: Text('elevated button'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

That’s all for now.
If you like this post, please share it with your family and friends.
Thanks.

StadiumBorder
Flutter ElevatedButton Docs