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.

How to Create a rounded button / button with border-radius in Flutter, RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter

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

  • 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.

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, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter
                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, RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter
                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.
GestureDetector, RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter
                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, RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter
                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, RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter
                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.
StadiumBorder, RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter
                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.
RaisedButton, create a rounded button flutter, button with border-radius in flutter, rounded button flutter, button with border-radius flutter, inkWell
                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),
                      ),
                    ),
                  ),
                ),
  • 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),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

So Guys That’s It For This Tutorial. Hope you like our tutorial. Comment below Your thoughts and your queries. And Also Comment below your suggestion here.

Also Read How To Create Rounded Corners Image in Flutter

Milan Dhameliya is an Information Technology Engineer. By profession, he is a Full Stack developer with knowledge of multiple back-end platforms (e.g., PHP, Node.js, Python) and frontend Flutter frameworks.

1 thought on “How to Create a rounded button / button with border-radius in Flutter”

Leave a Comment