How to Add an ElevatedButton with Rounded Corners in Flutter

We already know how to add an ElevatedButton in flutter. In this blog post, let’s check how to create an Elevated Button with custom border radius 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 helps us to define border-radius to create rounded corners. See the the code snippet given below.

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

Following is the complete example of ElevatedButton with border radius in flutter.


import 'package:flutter/material.dart';
void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ElevatedButton Background Color Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatelessWidget {
  FlutterExample({Key key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(30),
            child:ElevatedButton(onPressed: () {},
                  style: ElevatedButton.styleFrom(shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(30.0),
    ),),
                  child: Text(' Elevated Button'))),));
}

}

Following is the output of this flutter tutorial.

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

Leave a Comment

Your email address will not be published. Required fields are marked *