Customizing Button Shapes in Flutter

In Flutter, buttons are a crucial part of any user interface. By default, Flutter provides several types of buttons, including ElevatedButton, OutlinedButton, and TextButton. However, you may want to customize the shape of your buttons to fit your app’s design. In this tutorial, we’ll explore how to create rounded buttons in Flutter.

Understanding Button Types

Before diving into customizing button shapes, it’s essential to understand the different types of buttons available in Flutter:

• ElevatedButton: A filled button with an elevation effect.
• OutlinedButton: An outlined button without a fill color.
• TextButton: A simple text-based button.

Customizing Button Shapes

To customize the shape of a button, you can use the style property and provide a ButtonStyle object. Within this object, you can specify the shape property to define the border shape of the button.

Using RoundedRectangleBorder

One common way to create rounded buttons is by using RoundedRectangleBorder. Here’s an example:

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

In this example, we’re creating an ElevatedButton with a rounded rectangle border and a red color.

Using StadiumBorder

Another way to create rounded buttons is by using StadiumBorder. Here’s an example:

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

In this example, we’re creating an ElevatedButton with a stadium-shaped border.

Using CircleBorder

You can also create circular buttons using CircleBorder. Here’s an example:

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

In this example, we’re creating an ElevatedButton with a circular border and additional padding.

Best Practices

When customizing button shapes, keep the following best practices in mind:

• Use consistent design patterns throughout your app.
• Ensure that your buttons are accessible and follow platform guidelines.
• Test your buttons on different devices and screen sizes to ensure they look and feel great.

By following these steps and best practices, you can create custom rounded buttons in Flutter that enhance the user experience of your app.

Example Code

Here’s a complete example code snippet that demonstrates how to create custom rounded buttons:

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    TextButton(
      child: Text('Add to cart'.toUpperCase()),
      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: () {},
    ),
    SizedBox(width: 10),
    ElevatedButton(
      child: Text('Submit'),
      style: ButtonStyle(
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.teal, width: 2.0),
          ),
        ),
      ),
      onPressed: () {},
    ),
  ],
)

In this example, we’re creating a row with two custom rounded buttons: a TextButton and an ElevatedButton.