Creating a Rounded Button in Flutter

Buttons are a fundamental part of any mobile app. In Flutter, creating a button is straightforward, but sometimes you may want to customize the look of your buttons. One way to do this is by adding a border-radius to create a rounded button. In this tutorial, we'll show you how to create a rounded button with border-radius in Flutter.

To create a rounded button in Flutter, we can use the 'RaisedButton' widget and set its 'shape' property to a 'RoundedRectangleBorder'. Here's an example:

RaisedButton(
  onPressed: () {
    // Do something
  },
  child: Text('Click me'),
  color: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18.0),
  ),
)

In the example above, we're creating a new 'RaisedButton' with a blue color and a child widget that displays the text 'Click me'. We're also setting the 'shape' property to a new 'RoundedRectangleBorder' with a 'borderRadius' of 18.0. This creates a rounded border for our button.

If you want to create a flat button with a rounded border, you can use the 'FlatButton' widget instead of the 'RaisedButton' widget. Here's an example:

FlatButton(
  onPressed: () {
    // Do something
  },
  child: Text('Click me'),
  color: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18.0),
  ),
)

In the example above, we're creating a new 'FlatButton' with a blue color and a child widget that displays the text 'Click me'. We're also setting the 'shape' property to a new 'RoundedRectangleBorder' with a 'borderRadius' of 18.0.

7 months ago