Round Button with Text and Icon in Flutter

Introduction

In this post, we will explore how to create a round button with text and icon in Flutter. The button will have a circular shape, with an orange background color, green splash effect on tap, and a size of 56×56 pixels.

Screenshot

The screenshot below shows the desired output:

SizedBox.fromSize(
  size: Size(56, 56), // button width and height
  child: ClipOval(
    child: Material(
      color: Colors.orange, // button color
      child: InkWell(
        splashColor: Colors.green, // splash color
        onTap: () {}, // button pressed
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.call), // icon
            Text("Call"), // text
          ],
        ),
      ),
    ),
  ),
)

Breaking Changes in Flutter 1.20

As of Flutter 1.20, the following button types are deprecated:

• FlatButton
• RaisedButton

You can simply use named constructors for creating different types of buttons with icons.

FlatButton.icon(onPressed: null, icon: null, label: null);
RaisedButton.icon(onPressed: null, icon: null, label: null);

However, if you have specific requirements, you can always create a custom button with different layouts or simply wrap a widget in GestureDetector.

Creating the Button Widget

To create the round button with text and icon, we will use the following code snippet:

SizedBox.fromSize(
  size: Size(56, 56), // button width and height
  child: ClipOval(
    child: Material(
      color: Colors.orange, // button color
      child: InkWell(
        splashColor: Colors.green, // splash color
        onTap: () {}, // button pressed
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.call), // icon
            Text("Call"), // text
          ],
        ),
      ),
    ),
  ),
)

How it Works

The button widget is created using a combination of the following widgets:

• SizedBox: To set the size of the button to 56×56 pixels.
• ClipOval: To create a circular shape for the button.
• Material: To provide a background color and theme for the button.
• InkWell: To handle tap events on the button.
• Column: To stack the icon and text widgets vertically in the center of the button.

Conclusion

In this post, we have learned how to create a round button with text and icon in Flutter. We also discussed the breaking changes introduced in Flutter 1.20, where FlatButton and RaisedButton are deprecated. With the use of named constructors or custom buttons, you can achieve similar results without using the deprecated widgets.