How to create a circle icon button in Flutter?

Creating circular icon buttons in Flutter is typically achieved by wrapping the IconButton within a CircleAvatar or ClipOval. Below, I will provide a detailed explanation of how to create a circular icon button using IconButton and ClipOval, along with a concrete example.

Step 1: Using IconButton

The IconButton is a commonly used component in Flutter for creating icon buttons. By placing the IconButton inside a ClipOval, its shape can be made circular. The ClipOval component trims its child into an oval (or a circle if the width and height are equal).

Step 2: Setting Button Styles

You can set the displayed icon using the icon parameter and define the action triggered when the button is pressed with onPressed. Additionally, by adjusting properties such as padding and iconSize, you can further customize the button's appearance and size.

Example Code

Below is an example of creating a circular icon button in Flutter:

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Circular Icon Button')),
      body: Center(
        child: ClipOval(
          child: Container(
            color: Colors.blue,  // Background color
            child: IconButton(
              icon: Icon(Icons.add, color: Colors.white), // Icon and color
              onPressed: () {
                print('Clicked circular button');
              },
            ),
          ),
        ),
      ),
    ),
  ));
}

Explanation

1. We use ClipOval to wrap the IconButton, making its appearance circular.
2. Inside the IconButton, an add icon is displayed, and when the button is pressed, the console outputs 'Clicked circular button'.
3. We also set the button's background color to blue and the icon color to white for better aesthetics.

With this, you can add a visually appealing and functional circular icon button to your Flutter application.