Flutter Elevated Button With Rounded Corners – 5 Examples

Buttons have huge importance in every UI and using the same old fashioned rectangle shape button can be less attractive.

So In this post, you will make Elevated Button with rounded corners. It’s actually easy, but we can use different ways to make it happen.

ElevatedButton available since Flutter 1.22, it’s a replacement for old RaisedButton.

So without wasting time, let’s get started.

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