How to Create a rounded button / button with border-radius in Flutter

Hello Guys, How are you all ? hope you all are fine. In this tutorial we are going to learn How to Create a rounded button / button with border-radius in Flutter.

In Flutter there is Always more than 1 way to make any thing in flutter. So In todays Tutorial We will Learn All Possible way to make button with border-radius in Flutter.

Here We have many methods to create rounded buttons or buttons with border radius in a flutter. we are going to learn all methods one by one. Let’s start this tutorial on How to Create a rounded button / button with border-radius in Flutter.

1. How to Create a Rounded button using RaisedButton.
2. Create a Rounded button using FlatButton.
3. How To Create a Rounded button using GestureDetector.
4. Create a Rounded button using ClipRRect.
5. How to Create a Rounded button using ClipOval.
6. Create a Rounded button By using StadiumBorder.
7. How to Create a Rounded button with InkWell
8. Create a Rounded button with OutlinedButton

• We have Many Method to for rounded button / button with border-radius in Flutter. I am Providing here most of method here with Source Code And Example.

Question: How to Create a rounded button in flutter ?
Answer: to create rounded buttons or buttons with border-radius in a flutter. we are going to learn all methods one by one. Let’s start this tutorial on How to Create a rounded button/button with border radius in Flutter.

Create a Rounded button using RaisedButton

• Here We can use the RaisedButton Widget. Raised Button Widget has shape property which we can utilise as shown in below code.

                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.black,
                  child: Text("RaisedButton"),
                  onPressed: () {},
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0),
                  ),
                ),

Method To Create a Rounded button using FlatButton

• Here We can use the FlatButton Widget. FlatButton Widget has Also shape property which we can utilise as shown in below code.

                FlatButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18.0),
                    side: BorderSide(color: Colors.red),
                  ),
                  onPressed: () {},
                  child: Text("FlatButton"),
                ),

How To Create a Rounded button using GestureDetector

• We can also use GestureDetector Widget. GestureDetector Widget has Decoration Property. which we can utilise as shown in below code.

                Container(
                  height: 50.0,
                  child: GestureDetector(
                    onTap: () {},
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.black,
                        ),
                        borderRadius: BorderRadius.circular(30.0),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Center(
                            child: Text(
                              "GestureDetector",
                              style: TextStyle(
                                color: Colors.black,
                                fontFamily: 'Montserrat',
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                letterSpacing: 1,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),

Method To Create a Rounded button using ClipRRect

• We can also use ClipRRect Widget. ClipRRect Widget has borderRadius Property. which we can utilise as shown in below code.

                ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: RaisedButton(
                    color: Colors.black,
                    onPressed: () {},
                    child: Text(
                      "ClipRRect",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),

Rounded button using ClipOval

• We can also use ClipOval Widget. you can customise this button by its clipper property.

                ClipOval(
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text("ClipOval"),
                  ),
                ),

Create a Rounded button By using StadiumBorder

• We can also use RaisedButton Widget. RaisedButtonWidget has shape: StadiumBorder Property. which we can utilise as shown in below code.

                RaisedButton(
                  shape: StadiumBorder(),
                  onPressed: () {},
                  child: Text("StadiumBorder"),
                ),

Create a Rounded button with InkWell

• We can also use InkWell Widget. InkWell has Decoration Property. which we can utilise as shown in below code.

                InkWell(
                  child: Container(
                    //width: 100.0,
                    height: 50.0,
                    decoration: BoxDecoration(
                      color: Colors.black,
                      border: Border.all(color: Colors.white, width: 2.0),
                      borderRadius: BorderRadius.circular(30.0),
                    ),
                    child: Center(
                      child: Text(
                        'InkWell',
                        style: TextStyle(fontSize: 18.0, color: Colors.white),
                      ),
                    ),
                  ),
                ),

Create a Rounded button with OutlinedButton

We can also use OutlinedButton has style property and you can give shape to style. as shown in below code.

OutlinedButton(
  onPressed: null,
  style: ButtonStyle(
    shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
  ),
  child: const Text("Button text"),
);

• I am Providing Full Source Code here of this my main.dart file Here.

import 'dart:ui';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.black),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Rounded Corner Button - FlutterCorner"),
        ),
        body: Padding(
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.black,
                  child: Text("RaisedButton"),
                  onPressed: () {},
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0),
                  ),
                ),
                FlatButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18.0),
                    side: BorderSide(color: Colors.red),
                  ),
                  onPressed: () {},
                  child: Text("FlatButton"),
                ),
                Container(
                  height: 50.0,
                  child: GestureDetector(
                    onTap: () {},
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.black,
                        ),
                        borderRadius: BorderRadius.circular(30.0),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Center(
                            child: Text(
                              "GestureDetector",
                              style: TextStyle(
                                color: Colors.black,
                                fontFamily: 'Montserrat',
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                letterSpacing: 1,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
                ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: RaisedButton(
                    color: Colors.black,
                    onPressed: () {},
                    child: Text(
                      "ClipRRect",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
                ClipOval(
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text("ClipOval"),
                  ),
                ),
                RaisedButton(
                  shape: StadiumBorder(),
                  onPressed: () {},
                  child: Text("StadiumBorder"),
                ),
                InkWell(
                  child: Container(
                    //width: 100.0,
                    height: 50.0,
                    decoration: BoxDecoration(
                      color: Colors.black,
                      border: Border.all(color: Colors.white, width: 2.0),
                      borderRadius: BorderRadius.circular(30.0),
                    ),
                    child: Center(
                      child: Text(
                        'InkWell',
                        style: TextStyle(fontSize: 18.0, color: Colors.white),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Summery

So, It’s All About How to Create a rounded button / button with border-radius in Flutter ?. I hope this tutorial helps you to add Borders to your Widget. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

• How to add Border to ElevatedButton?
• How to give Shadow and Elevation to ElevatedButton?
• Also Read How to give Text Style to ElevatedButton?
• How to Change Background color of Elevated Button in Flutter
• How to change background color of Elevated Button in Flutter from function?