CODEWITHSUNDEEP
androidiosflutterdartuser-interface
Kingsley CA
Kingsley CA

Reputation: 11634

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

I'm currently developing an Android app in Flutter. How can I add a rounded button?

Upvotes: 601

Views: 863175

Answers (30)

Rahul Khatri
Rahul Khatri

Reputation: 1622

MaterialStateProperty is deprecated. Instead use WidgetStateProperty

ElevatedButton(
      style: ButtonStyle(
          shape: WidgetStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(18.0),
                  side: BorderSide(
                      color: Colors.teal, 
                      width: 2.0,
                  ),
              ),
          ),
      ),
      child: Text('Submit'),
      onPressed: () {},
),

Upvotes: 0

Muhammad Bilal ahmad
Muhammad Bilal ahmad

Reputation: 325

You can create a MaterialButton with rounded radius like this.

MaterialButton(
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(8))
            ),
            color: Colors.grey,
            onPressed: (){
          }, child: Text("Click Me"),)

Upvotes: 0

Amin Memariani
Amin Memariani

Reputation: 912

You can try this if you also want to have an icon beside your text:

 Padding(
              padding: EdgeInsets.all(15),
              child: TextButton(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('Some Text',
                        style: TextStyle(
                            color: Colors.blue,
                            fontSize: 22,
                            fontWeight: FontWeight.w700)),
                    Icon(Icons.arrow_forward),
                  ],
                ),
                style: TextButton.styleFrom(
                  minimumSize: const Size.fromHeight(50),
                  iconColor: Colors.blue,
                  foregroundColor: Colors.blue,
                  side: BorderSide(color: Colors.blue, width: 2),
                  shape: const RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(12))),
                ),
                onPressed: () {},
              ),
            ),

Upvotes: 0

Shahoriar Nahid
Shahoriar Nahid

Reputation: 162

Evaluated Button with custom text

ElevatedButton(
              child: Text(
                "Submit",
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                  fontWeight: FontWeight.w700,
                ),
              ),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(Colors.grey),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15.0),
                  ),
                ),
                visualDensity: VisualDensity(vertical: 2),
              ),
              onPressed: () {},
            ),

Upvotes: 0

krishnaacharyaa
krishnaacharyaa

Reputation: 25080

In the new update flutter 3.0 flutter uses Material 3 guidelines

According to which the default border of buttons are rounded

Default Button

  ElevatedButton(
          onPressed: () {}, child: const Text("Default Button ")),

enter image description here

Button with Border Radius Zero

 ElevatedButton(
          style: ElevatedButton.styleFrom(
              shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.zero)),
          onPressed: () {},
          child: const Text("Border Radius Zero ")),

enter image description here

Button with custom border radius

  ElevatedButton(
          style: ElevatedButton.styleFrom(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(50))),
          onPressed: () {},
          child: const Text("Border Radius Custom ")),

enter image description here

Note: You can use the same logic for FilledButton, TextButton and the like.

Refer https://m3.material.io/components/all-buttons for button style.

Upvotes: 19

S.m. Kamal Hussain Shahi
S.m. Kamal Hussain Shahi

Reputation: 109

Container(
      height: height,
      width: width,
      margin: margin,
      decoration: BoxDecoration(
        color: backgroundColor,
        gradient: gradient,
        border: Border.all(color: borderColor),
        borderRadius: borderRadius,
        boxShadow: boxShadow,
      ),
      child: InkWell(
        onTap: onPressed,
        borderRadius: borderRadius,
        child: Padding(
          padding: padding ?? EdgeInsets.zero,
          child: child,
        ),
      ),
    )

it is a transparent button style that also shows the effect of the press.

Upvotes: 0

Nachiket Gohil
Nachiket Gohil

Reputation: 1223

If you want to Use MaterialButton then,

You can add RoundedRectangleBorder Given in Shape Like this,

MaterialButton(
  onPressed: () {},
  minWidth: MediaQuery.of(context).size.width * 0.4,
  height: 34,
  color: colorWhite,
  highlightColor: colorSplash,
  splashColor: colorSplash,
  visualDensity: VisualDensity.compact,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(4),
    side: BorderSide(
      color: colorGrey,
      width: 0.6,
    ),
  ),
  child: Text("CANCEL"),
),

Upvotes: 5

Christian Findlay
Christian Findlay

Reputation: 7712

ElevatedButton is rounded by default in Material Design 3. Turn Material Design 3 on with this flag:

MaterialApp(
  theme: ThemeData(useMaterial3: true),
  //...
),

This button

ElevatedButton(
  onPressed: () {},
  child: const Text("Press me!"),
),

Looks like this:

enter image description here

Read more about this here.

Upvotes: 0

Newbie
Newbie

Reputation: 200

Container with round border color:

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    border: Border.all(color: Colors.red),
  ),
  child: Text("Some Text"),
)

Upvotes: 1

Heshan Sandeepa
Heshan Sandeepa

Reputation: 3687

With Flutter version 2, try this

ElevatedButton(
    style: ButtonStyle(
        shape: MaterialStateProperty.all<OutlinedBorder>(
            RoundedRectangleBorder(
                side:
                    BorderSide(width: 1.0, color: Colors.red,
                borderRadius:
                    BorderRadius.circular(5.0),),),
        backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.green),
        elevation:
            MaterialStateProperty.all<double>(8.0),
        padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
            const EdgeInsets.symmetric(
                horizontal: 15.0,
                vertical: 10.0),),),
    onPressed: (){},
    child: Text('Button'),)

Upvotes: 2

CopsOnRoad
CopsOnRoad

Reputation: 268284

Update

Since the left-sided buttons are now deprecated, use the right-sided ones.

Deprecated    -->   Recommended

RaisedButton  -->   ElevatedButton
OutlineButton -->   OutlinedButton
FlatButton    -->   TextButton

  • ElevatedButton

  1. Using StadiumBorder

    enter image description here

    ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(shape: StadiumBorder()),
)

  2. Using RoundedRectangleBorder

    enter image description here

    ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12), // <-- Radius
    ),
  ),
)

  3. Using CircleBorder

    enter image description here

    ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    shape: CircleBorder(),
    padding: EdgeInsets.all(24),
  ),
)

  4. Using BeveledRectangleBorder

    enter image description here

    ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(12)
    ),
  ),
)

OutlinedButton

  1. Using StadiumBorder

    enter image description here

    OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: StadiumBorder(),
  ),
)

  2. Using RoundedRectangleBorder

    enter image description here

    OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

  3. Using CircleBorder:

    enter image description here

    OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: CircleBorder(),
    padding: EdgeInsets.all(24),
  ),
)

  4. Using BeveledRectangleBorder

    enter image description here

    OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

TextButton

TextButton also works similar to ElevatedButton and OutlinedButton, however, you can only see the shapes when the button is pressed.

Upvotes: 471

Mohamed Reda
Mohamed Reda

Reputation: 1617

After the Null safety, use ElevatedButton not RaisedButton because RaisedButton is depreciated as the docs says.

             child: ElevatedButton(
                onPressed: () {},
                child: const Text('Add item to the list'),
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(Common.buttonColor),
                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(18.0),
                    ),
                  ),
                ),
              ),

enter image description here

Upvotes: 5

My Car
My Car

Reputation: 4576

Try this:

SizedBox(
  height: 40.0,
  child: MaterialButton(
    child: Text("Button"),
    color: Colors.blue,
    disabledColor: Colors.blue,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(10.0), // Change your border radius here
      ),
    ),
    onPressed: () {},
  ),
),

Upvotes: 0

Javeed Ishaq
Javeed Ishaq

Reputation: 7105

Different ways to create a rounded button are as follows:

ElevatedButton with ElevatedButton.styleFrom

ElevatedButton(
          style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30.0),
            ),
          ),
          onPressed: () {},
          child:
              Text("Buy now".toUpperCase(), style: TextStyle(fontSize: 14)),
        ),

ElevatedButton with ButtonStyle

ElevatedButton(
          style: ButtonStyle(
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(50.0),
          ))),
          onPressed: () {},
          child: Text("Submit".toUpperCase()),
        ),

A practical demonstration of a round button can be found in the below Dartpad link:

Rounded Button Demo Examples on DartPad

Screenshot of dartpad

Upvotes: 21

Vishal_VE
Vishal_VE

Reputation: 2137

There is another way to do this-Just use FloatingActionButton for Proper Rounded Button.

Scaffold(
      appBar: AppBar(
        title: const Text('Floating Action Button'),
      ),
      body: const Center(child: Text('Press the button below!')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add your onPressed code here!
        },
        backgroundColor: Colors.green,
        child: const Icon(Icons.navigation),
      ),
    )

Upvotes: 0

Dhrumil Shah - dhuma1981
Dhrumil Shah - dhuma1981

Reputation: 15799

You can use the ElevatedButton Widget. The elevated button widget has a shape property which you can use as shown in the below snippet.

ElevatedButton(
      style: ButtonStyle(
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(18.0),
                  side: BorderSide(
                      color: Colors.teal, 
                      width: 2.0,
                  ),
              ),
          ),
      ),
      child: Text('Submit'),
      onPressed: () {},
),

Upvotes: 296

softweng
softweng

Reputation: 334

you can use this code:

ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(borderRadius))),
      ),
      child: Text("ok"),
    )

Upvotes: 8

Mohi Dev
Mohi Dev

Reputation: 3406

you can use this style for your elevatedButton to make it circular

style: ButtonStyle(
              elevation: MaterialStateProperty.all(8.0),
              backgroundColor:
                  MaterialStateProperty.all(Constants().orangeColor),
              textStyle: MaterialStateProperty.all(
                TextStyle(
                  fontSize: 16.0,
                ),
              ),
              shape: MaterialStateProperty.all<CircleBorder>(
                CircleBorder(),
              ),
              shadowColor: MaterialStateProperty.all(Constants().orangeColor),
            ),

Upvotes: 2

yobo zorle
yobo zorle

Reputation: 418

How it looks!

Use TextButton instead.

Buttons like the FlatButton, RaisedButton and OutlineButton has been said to be deprecated since October 2020. This is one of the Flutter development team's effort to simplify and make the Flutter API consistent, you can customize its style by using style property.

      TextButton(
        child: Padding(
          padding: const EdgeInsets.only(left: 10.0, right: 10.0),
          child: Text('Text here',
              style: TextStyle(
                  color: Colors.teal,
                  fontSize: 14,
                  fontWeight: FontWeight.w500)),
        ),
        style: TextButton.styleFrom(
          primary: Colors.teal,
          onSurface: Colors.yellow,
          side: BorderSide(color: Colors.teal, width: 2),
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(25))),
        ),
        onPressed: () {
          print('Pressed');
        },
      ),

Upvotes: 10

Akash Lilhare
Akash Lilhare

Reputation: 555

addButton() {
return Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.symmetric(vertical: 10.0),
      child: SizedBox(
        height: 45,
        width: 200,
        child: ElevatedButton.icon(
          onPressed: () async {},
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0),
                  )),
            elevation: MaterialStateProperty.all(1),
            backgroundColor: MaterialStateProperty.all(Colors.blue),
          ),
          icon: Icon(Icons.add, size: 18),
          label: Text("Add question"),
        ),
      ),
    ),
  ],
);

}

Upvotes: 2

Rasel Khan
Rasel Khan

Reputation: 4289

New Elevate Button

Style

customElevatedButton({radius, color}) => ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(radius == null ? 100 : radius),
    ),
    primary: color,
);

Icon

Widget saveIcon() => iconsStyle1(
    Icons.save,
);

// Common icon style

iconsStyle1(icon) => Icon(
    icon,
    color: white,
    size: 15,
);

Button use

ElevatedButton.icon(
    icon: saveIcon(),
    style:
        customElevatedButton(color: Colors.green[700]),
    label: Text('Save',
        style: TextStyle(color: Colors.white)),
    onPressed: () {
    },
),

Upvotes: 3

Ineza
Ineza

Reputation: 147

Another cool solution that works in 2021:

TextButton(
    child: Padding(
        padding: const EdgeInsets.all(5.0),
        child: Text('Follow Us'.toUpperCase()),
    ),
    style: TextButton.styleFrom(
        backgroundColor: Colors.amber,
        shadowColor: Colors.red,
        elevation: 2,
        textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(5.0),)
    ),
    onPressed: () {
        print('Pressed');
    },
),

Upvotes: 2

WSBT
WSBT

Reputation: 36373

Since September 2020, Flutter 1.22.0:

Both "RaisedButton" and "FlatButton" are deprecated.

The most up-to-date solution is to use new buttons:

1. ElevatedButton:

Button without an icon

Button with an icon

Code:

ElevatedButton(
  child: Text("ElevatedButton"),
  onPressed: () => print("it's pressed"),
  style: ElevatedButton.styleFrom(
    primary: Colors.red,
    onPrimary: Colors.white,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)

Don't forget, there's also an .icon constructor to add an icon easily:

ElevatedButton.icon(
  icon: Icon(Icons.thumb_up),
  label: Text("Like"),
  onPressed: () => print("it's pressed"),
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)

2. OutlinedButton:

Outlined button

Code:

OutlinedButton.icon(
  icon: Icon(Icons.star_outline),
  label: Text("OutlinedButton"),
  onPressed: () => print("it's pressed"),
  style: ElevatedButton.styleFrom(
    side: BorderSide(width: 2.0, color: Colors.blue),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)

3. TextButton:

You can always use TextButton if you don't want an outline or color fill.

Upvotes: 76

Abir Ahsan
Abir Ahsan

Reputation: 3059

You can also use ButtonTheme():

Enter image description here

Here is example code -

ButtonTheme(
    minWidth: 200.0,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.green)),
    child: RaisedButton(
        elevation: 5.0,
        hoverColor: Colors.green,
        color: Colors.amber,
        child: Text(
            "Place Order",
            style: TextStyle(
                     color: Colors.white, fontWeight: FontWeight.bold),
        ),
        onPressed: () {},
    ),
),

Upvotes: 6

Dennis
Dennis

Reputation: 511

Now we have an Icon button to achieve a rounded button click and overlay. However, the background color is not yet available, but the same can be achieved by the Circle avatar widget as follows:

CircleAvatar(
    backgroundColor: const Color(0xffF4F3FA),
    child: IconButton(
        onPressed: () => FlushbarHelper.createInformation(
                             message: 'Work in progress...')
                             .show(context),
        icon: Icon(Icons.more_vert),
    ),
),

Upvotes: 4

Paras Sharma
Paras Sharma

Reputation: 208

Here is the code for your problem. You just have to take a simple container with a border radius in boxdecoration.

new Container(
    alignment: Alignment.center,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15.0)),
        color: Colors.blue,
    ),

    child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            Padding(
                padding: const EdgeInsets.all(10.0),
                child: new Text(
                    "Next",
                    style: new TextStyle(
                        fontWeight: FontWeight.w500,
                        color: Colors.white,
                        fontSize: 15.0,
                    ),
                ),
            ),
        ],
    ),
),

Upvotes: 5

eko
eko

Reputation: 672

Here is another solution:

Container(
    height: MediaQuery.of(context).size.height * 0.10,
    width: MediaQuery.of(context).size.width,
    child: ButtonTheme(
        minWidth: MediaQuery.of(context).size.width * 0.75,
        child: RaisedButton(
            shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(25.0),
                side: BorderSide(color: Colors.blue)),
                onPressed: () async {
                    // Do something
                },
                color: Colors.red[900],
                textColor: Colors.white,
                child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text("Button Text,
                    style: TextStyle(fontSize: 24)),
            ),
        ),
    ),
),

Upvotes: 3

Tushar Nikam
Tushar Nikam

Reputation: 1593

To use any shape in your button, make sure you perform all the code inside the Button widget:

 **shape: RoundedRectangleBorder(
        borderRadius: new BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red) ),**

If you want make it is square, use BorderRadius.circular(0.0) It automatically makes it into a square.

The button is like this:

Enter image description here

Here is the all source code for the give UI screen:

 Scaffold(
    backgroundColor: Color(0xFF8E44AD),
    body: new Center(
      child: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.fromLTRB(90, 10, 20, 0),
            padding: new EdgeInsets.only(top: 92.0),
            child: Text(
              "Currency Converter",
              style: TextStyle(
                fontSize: 48,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(),
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                filled: true,
                fillColor: Colors.white,
                labelText: "Amount",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                filled: true,
                fillColor: Colors.white,
                labelText: "From",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                  filled: true,
                  fillColor: Colors.white,
                  labelText: "To",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                  )),
            ),
          ),
          SizedBox(height: 20.0),
          MaterialButton(
            height: 58,
            minWidth: 340,
            shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(12)),
            onPressed: () {},
            child: Text(
              "CONVERT",
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
            color: Color(0xFFF7CA18),
          ),
        ],
      ),
    ),
  ),
);

Upvotes: 9

Speedy11
Speedy11

Reputation: 205

If anybody is looking for complete circular button then I achieved it this way:

Center(
            child: SizedBox.fromSize(
              size: Size(80, 80), // Button width and height
              child: ClipOval(
                child: Material(
                  color: Colors.pink[300], // Button color
                  child: InkWell(
                    splashColor: Colors.yellow, // splash color
                    onTap: () {}, // Button pressed
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(Icons.linked_camera), // Icon
                        Text("Picture"), // Text
                      ],
                    ),
                  ),
                ),
              ),
            ),
          )

Upvotes: 6

Sanjayrajsinh
Sanjayrajsinh

Reputation: 17219

In Flutter, the Container() widget is used for styling your widget. Using the Container() widget, you can set a border or rounded corner of any widget.

If you want to set any type of styling and set the decoration, put that widget into the Container() widget. That provides many properties to the decoration.

Container(
  width: 100,
  padding: EdgeInsets.all(10),
  alignment: Alignment.center,
  decoration: BoxDecoration(
          color: Colors.blueAccent,
          borderRadius: BorderRadius.circular(30)), // Make rounded corner
  child: Text("Click"),
)

Upvotes: 2

Related Questions