Adding Borders to Buttons in Flutter: Complete Guide

Introduction

Buttons are a fundamental part of any user interface, and customizing their appearance can greatly enhance the user experience. In this guide, we will explore how to add and customize borders for buttons in Flutter, focusing on both modern and legacy approaches.

Adding Borders to ElevatedButton

The ElevatedButton is the modern replacement for the legacy RaisedButton. To add a border to an ElevatedButton, you can use the style property with ButtonStyle. Here's an example:

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    side: BorderSide(color: Colors.blue, width: 2),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('Elevated Button with Border'),
)

Explanation

• side: Defines the border's color and width.
• shape: Allows you to customize the button's shape, such as adding rounded corners.

Adding Borders to Legacy RaisedButton

Although RaisedButton is deprecated, you might encounter it in older projects. Here's how you can add a border to it:

RaisedButton(
  onPressed: () {},
  shape: RoundedRectangleBorder(
    side: BorderSide(color: Colors.red, width: 2),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Text('Raised Button with Border'),
)

Note

It's recommended to migrate to ElevatedButton for new projects as RaisedButton is no longer actively maintained.

Customizing Borders Further

You can further customize borders by using different shapes and styles. For example, you can create a circular button with a border:

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    side: BorderSide(color: Colors.green, width: 3),
    shape: CircleBorder(),
  ),
  child: Icon(Icons.add),
)

Conclusion

Adding borders to buttons in Flutter is straightforward and provides a great way to enhance your app's design. Whether you're using the modern ElevatedButton or working with legacy code, Flutter offers flexible options to meet your styling needs. Experiment with different shapes, colors, and widths to create visually appealing buttons for your app.