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.
Contents
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), ), ), ),
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 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.