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

Question

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

This here have mentioned multiple ways mightytechno.com/rounded-button-flutter — Ishan Fernando, Commented Dec 26, 2019 at 9:13

Peter Mortensen · Accepted Answer · 2021-04-26 20:04:41Z

1. Solution Summary

FlatButton and RaisedButton are deprecated.

So, you can use shape which placed in the style property, for TextButton and ElevatedButton.

There are some changes since Flutter 2.0:

style: the property type has changed to ButtonStyle
shape: the property type has changed to MaterialStateProperty<T>

2. Rounded Button

Inside the style property exists the shape property:

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0),
      side: BorderSide(color: Colors.red)
    )
  )
)

Square Button

For a square button you can use ElevatedButton or otherwise add:

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.zero,
      side: BorderSide(color: Colors.red)
    )
  )
)

Complete Example

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    TextButton(
      child: Text(
        "Add to cart".toUpperCase(),
        style: TextStyle(fontSize: 14)
      ),
      style: ButtonStyle(
        padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red)
          )
        )
      ),
      onPressed: () => null
    ),
    SizedBox(width: 10),
    ElevatedButton(
      child: Text(
        "Buy now".toUpperCase(),
        style: TextStyle(fontSize: 14)
      ),
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
        backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.zero,
            side: BorderSide(color: Colors.red)
          )
        )
      ),
      onPressed: () => null
    )
  ]
)

This code works, but can't we remove the shape: MaterialStateProperty.all<RoundedRectangleBorder>(...) portion and just directly assign a RoundedRectangleBorder(...) to the shape property? — fpsColton, Commented Jun 11, 2021 at 3:04
@fpsColton Sure, in fact I can't even have it to work via MaterialStateProperty, only using RoundedRectangleBorder(...). I am getting error otherwise, which looks like this: The argument type 'MaterialStateProperty<RoundedRectangleBorder>' can't be assigned to the parameter type 'OutlinedBorder?'. — Konstantin Kozirev, Commented Aug 6, 2021 at 9:53

CopsOnRoad · Accepted Answer · 2022-04-22 06:26:11Z

Update

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

Deprecated    -->   Recommended

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

ElevatedButton

Using StadiumBorder

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

Using RoundedRectangleBorder

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

Using CircleBorder

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

Using BeveledRectangleBorder

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

`OutlinedButton`

Using StadiumBorder

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

Using RoundedRectangleBorder

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

Using CircleBorder:

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

Using BeveledRectangleBorder

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.

Michal Šrůtek · Accepted Answer · 2021-12-03 13:38:51Z

295

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: () {},
),

edited Dec 3, 2021 at 13:38

Michal Šrůtek

2,2291 gold badge20 silver badges24 bronze badges

answered Apr 24, 2018 at 10:37

Dhrumil Shah - dhuma1981

15.6k6 gold badges33 silver badges40 bronze badges

2

RaisedButton is deprecated and no longer used. Use Elevated button with ButtonStyle as suggested by Peter
– Ashutosh Singh
Commented May 31, 2021 at 16:24

Add a comment |

Peter Mortensen · Accepted Answer · 2021-04-26 20:43:00Z

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`:

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`:

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.

Rahul Shukla · Accepted Answer · 2019-12-01 15:34:36Z

45

You can simply use RaisedButton

Padding(
  padding: EdgeInsets.only(left: 150.0, right: 0.0),
  child: RaisedButton(
    textColor: Colors.white,
    color: Colors.black,
    child: Text("Search"),
    onPressed: () {},
    shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(30.0),
    ),
  ),
)

Output:

More info: RSCoder

edited Dec 1, 2019 at 15:34

answered Feb 16, 2019 at 13:39

Rahul Shukla

7,8353 gold badges15 silver badges26 bronze badges

2

'RaisedButton' is deprecated and shouldn't be used. Use ElevatedButton instead. See the migration guide in flutter.dev/go/material-button-migration-guide). This feature was deprecated after v1.26.0-18.0.pre.
– M Karimi
Commented May 10, 2022 at 10:21

Add a comment |

Peter Mortensen · Accepted Answer · 2021-04-26 20:09:20Z

41

You can simply use RaisedButton or you can use InkWell to get a custom button and also properties like onDoubleTap, onLongPress, etc.:

new InkWell(
  onTap: () => print('hello'),
  child: new Container(
    //width: 100.0,
    height: 50.0,
    decoration: new BoxDecoration(
      color: Colors.blueAccent,
      border: new Border.all(color: Colors.white, width: 2.0),
      borderRadius: new BorderRadius.circular(10.0),
    ),
    child: new Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
  ),
),

If you want to use the splashColor and highlightColor properties in the InkWell widget, use the Material widget as the parent of the InkWell widget instead of decorating the container (deleting the decoration property). Read about why here.

edited Apr 26, 2021 at 20:09

Peter Mortensen

31.3k22 gold badges109 silver badges132 bronze badges

answered Apr 24, 2018 at 15:39

Blasanka

22.1k12 gold badges106 silver badges107 bronze badges

4

If you want the InkWell to clip to the rounded corners then you need to add borderRadius: BorderRadius.circular(10.0) to the InkWell widget also otherwise it will go to the edges of the bounding rectangle.
– Victor Rendina
Commented Jun 1, 2019 at 20:36
1

@VictorRendina I was searching for a way to make the ripples rounded, thanks for ur comment. add this as a sperate answer to inkwell questions as many aren't mentioning this.
– Extremis II
Commented Jun 22, 2019 at 19:56

Add a comment |

Javeed Ishaq · Accepted Answer · 2022-02-26 15:34:55Z

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

krishnaacharyaa · Accepted Answer · 2023-09-15 18:20:37Z

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 ")),

Button with Border Radius Zero

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

Button with custom border radius

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

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

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

Peter Mortensen · Accepted Answer · 2021-04-26 20:10:59Z

You can use the below code to make a rounded button with a gradient color.

 Container(
          width: 130.0,
          height: 43.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30.0),
            gradient: LinearGradient(
              // Where the linear gradient begins and ends
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              // Add one stop for each color. Stops should increase from 0 to 1
              stops: [0.1, 0.9],
              colors: [
                // Colors are easy thanks to Flutter's Colors class.
                Color(0xff1d83ab),
                Color(0xff0cbab8),
              ],
            ),
          ),
          child: FlatButton(
            child: Text(
              'Sign In',
              style: TextStyle(
                fontSize: 16.0,
                fontFamily: 'Righteous',
                fontWeight: FontWeight.w600,
              ),
            ),
            textColor: Colors.white,
            color: Colors.transparent,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
            onPressed: () {

            },
          ),
        );

yobo zorle · Accepted Answer · 2021-07-21 05:19:14Z

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');
        },
      ),

Peter Mortensen · Accepted Answer · 2021-04-26 20:26:42Z

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:

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),
          ),
        ],
      ),
    ),
  ),
);

softweng · Accepted Answer · 2021-09-17 07:17:07Z

8

you can use this code:

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

answered Sep 17, 2021 at 7:17

softweng

3183 silver badges10 bronze badges

Add a comment |

mjhansen3 · Accepted Answer · 2019-06-14 16:25:03Z

You can use this code for a transparent rounded button by passing a transparent color to the color property inside BoxDecoration. eg. color: Colors.transparent. Also, take note that this button makes use of only the Container and GestureDetector widgets.

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

Peter Mortensen · Accepted Answer · 2021-04-26 20:22:24Z

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
                      ],
                    ),
                  ),
                ),
              ),
            ),
          )

Peter Mortensen · Accepted Answer · 2021-04-26 20:39:50Z

6

You can also use ButtonTheme():

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: () {},
    ),
),

edited Apr 26, 2021 at 20:39

Peter Mortensen

31.3k22 gold badges109 silver badges132 bronze badges

answered Aug 16, 2020 at 1:18

Abir Ahsan

2,9611 gold badge34 silver badges57 bronze badges

Add a comment |

shilpa navale · Accepted Answer · 2020-06-27 07:20:10Z

5

RaisedButton(
          child: Text("Button"),
          onPressed: (){},
          shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),
          side: BorderSide(color: Colors.red))
        )

answered Jun 27, 2020 at 7:20

shilpa navale

4893 gold badges10 silver badges20 bronze badges

3

While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.
– rizerphe
Commented Jun 27, 2020 at 7:49
An explanation would be in order. Please respond by editing your answer, not here in comments (without "Edit:", "Update:", or similar - the answer should appear as if it was written today).
– Peter Mortensen
Commented Apr 26, 2021 at 20:35

Add a comment |

Hadi Mir · Accepted Answer · 2020-08-29 14:45:16Z

One of the simplest ways to create a rounded button is to use a FlatButton and then specify the roundness by setting its shape property. Follow the code below

FlatButton(
  padding: EdgeInsets.all(30.0),
  color: Colors.black,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0)),
  child: child: Text(
    "Button",
    style: TextStyle(color: Colors.white),
  ),
  onPressed: () {
    print('Button pressed');
  },
),

Note: In order to change the roundness adjust the value inside BorderRadius.circular()

Peter Mortensen · Accepted Answer · 2021-04-26 20:33:42Z

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,
                    ),
                ),
            ),
        ],
    ),
),

Mohamed Reda · Accepted Answer · 2022-04-07 06:46:52Z

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

Adriaan · Accepted Answer · 2023-04-04 10:26:21Z

5

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"),
),

edited Apr 4, 2023 at 10:26

Adriaan

18.2k7 gold badges43 silver badges79 bronze badges

answered Jan 3, 2022 at 14:53

Nachiket Gohil

1,08515 silver badges18 bronze badges

Add a comment |

Peter Mortensen · Accepted Answer · 2021-04-26 20:38:01Z

4

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

edited Apr 26, 2021 at 20:38

Peter Mortensen

31.3k22 gold badges109 silver badges132 bronze badges

answered Aug 15, 2020 at 0:56

Dennis

5015 silver badges4 bronze badges

Add a comment |

robben · Accepted Answer · 2020-08-08 10:14:48Z

3

You can create a custom view and put it inside a GestureDetector for it to behave like a button. The benefit is that you can provide endless types of custom decoration (including making it round with specified radius) to the container.

answered Aug 8, 2020 at 10:14

robben

7271 gold badge9 silver badges15 bronze badges

Add a comment |

Peter Mortensen · Accepted Answer · 2021-04-26 20:32:37Z

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

Peter Mortensen · Accepted Answer · 2021-04-26 20:51:33Z

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: () {
    },
),

Peter Mortensen · Accepted Answer · 2021-04-26 20:20:02Z

2

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"),
)

edited Apr 26, 2021 at 20:20

Peter Mortensen

31.3k22 gold badges109 silver badges132 bronze badges

answered Oct 10, 2019 at 8:57

Sanjayrajsinh

16.2k8 gold badges78 silver badges81 bronze badges

Add a comment |

Peter Mortensen · Accepted Answer · 2021-04-26 20:48:38Z

2

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');
    },
),

edited Apr 26, 2021 at 20:48

Peter Mortensen

31.3k22 gold badges109 silver badges132 bronze badges

answered Jan 26, 2021 at 18:26

Ineza

1471 silver badge9 bronze badges

Add a comment |

Akash Lilhare · Accepted Answer · 2021-07-02 17:59:28Z

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"),
        ),
      ),
    ),
  ],
);

}

Mohi Dev · Accepted Answer · 2021-08-09 18:35:12Z

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

shaderone · Accepted Answer · 2022-05-05 06:38:34Z

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'),)

Amaury Ricardo · Accepted Answer · 2020-11-09 18:50:03Z

1

     Container(
        width: yourWidth,
        height: yourHeight ,
        decoration: BoxDecoration(
            borderRadius: radius,
            gradient: yourGradient,
            border: yourBorder),
        child: FlatButton(
          onPressed: {} (),
          shape: RoundedRectangleBorder(borderRadius: radius),
    .......

and use the same radius.

answered Nov 9, 2020 at 18:50

Amaury Ricardo

3473 silver badges5 bronze badges

Add a comment |

Collectives™ on Stack Overflow

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

41 Answers 41

Update

`ElevatedButton`

`OutlinedButton`

TextButton

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

1. `ElevatedButton`:

2. `OutlinedButton`:

3. `TextButton`:

Rounded Button Demo Examples on DartPad

New Elevate Button

Style

Icon

Button use

Not the answer you're looking for? Browse other questions tagged
android
ios
flutter
dart
user-interface
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

41 Answers 41

Update

ElevatedButton

OutlinedButton

TextButton

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

1. ElevatedButton:

2. OutlinedButton:

3. TextButton:

New Elevate Button

Style

Icon

Button use

Not the answer you're looking for? Browse other questions tagged androidiosflutterdartuser-interface or ask your own question.

Linked

Related

`ElevatedButton`

`OutlinedButton`

1. `ElevatedButton`:

2. `OutlinedButton`:

3. `TextButton`:

Not the answer you're looking for? Browse other questions tagged
android
ios
flutter
dart
user-interface
or ask your own question.