Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set or remove a button (RaisedButton) corner radius?

Tags:

flutter

None of the Flutter buttons seem to provide a way to change the corner radius of the button rectangle. There's a shape property but I have no idea how to use it.

like image 331
E-Madd Avatar asked Oct 16 '18 22:10

E-Madd


People also ask

How do you adjust a button corner?

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. Step 4 − Add the following code to res/drawable/mybutton.

How do you give a rounded border to a button in flutter?

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.

How do you set border radius in MUI?

To quickly add a border radius to all instances of a component, create a custom theme and add an overrides section. To create a custom theme, use the createMuiTheme hook. Then import that theme at a high level in your component and wrap all subcomponents in a ThemeProvider that uses that theme.

How do I put a border on my elevated button?

ElevatedButton has style Property so we can use the styleFrom method should be used to change the default style of the elevated button. We can change the border color using BorderSide class. ElevatedButton( onPressed: () {}, style: ElevatedButton. styleFrom( side: BorderSide( width: 5.0, color: Colors.


1 Answers

You can change the radius from the shape property, and give it a RoundedRectangleBorder, here you can play with the border radius.

You will get the rounded corner only in topRight,topLeft and bottomRight in the below example:

       RaisedButton(
                  onPressed: () {},
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(25.0),
                      topLeft: Radius.circular(25.0),
                      bottomRight: Radius.circular(25.0),
                    ),
                  ),
                ),
like image 86
Raouf Rahiche Avatar answered Sep 20 '22 23:09

Raouf Rahiche