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?

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

[![Transaparent Background Button][1]][1]


[1]:

You can simply use [RaisedButton][1]

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

[![enter image description here][2]][2]


More info: [RSCoder][3]


[1]:

[To see links please register here]

[2]:

[3]:

[To see links please register here]

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

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.

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- end snippet -->

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

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.

Wrap a TextButton in a Container widget like the below code snippet:

```lang-dart
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.black),
),
child: TextButton(
onPressed: () {
// To do
},
child: Text("Go to Change Language Screen "),
),
)
```

**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`][1]
* `shape`: the property type has changed to [`MaterialStateProperty<T>`][2]

**2. Rounded Button**

Inside the `style` property exists the `shape` property:

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

[![Enter image description here][3]][3]

**Square Button**

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

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

[![Enter image description here][4]][4]

**Complete Example**

```dart
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
)
]
)

```

[1]:

[To see links please register here]

[2]:

[To see links please register here]

[3]:

[4]:

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

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

[![Enter image description here][3]][3]

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

[1]:

[To see links please register here]

[2]:

[To see links please register here]

[3]:

[4]:

[To see links please register here]

[5]:

[To see links please register here]