How to Create a Circular Button in Flutter?

Button is one of the most important UI elements in any app. In this blog post, we will see how to create a circular button in Flutter.

Circular buttons can be used to add extra visual flair to your app and can be helpful in drawing attention to specific elements. They can also be used to create a more uniform look and feel across your app.

You can often find it on a profile screen or any other screen where you need to show an important button.

CircleAvatar(
    backgroundColor: Colors.red,
    radius: 75,
    child: TextButton(
      child: const Center(child: Text('Button')),
      onPressed: () {},
    ),
  ),
SizedBox(
  width: 150,
  height: 150,
  child: MaterialButton(
    shape: const CircleBorder(side: BorderSide(width: 1, color: Colors.blue, style: BorderStyle.solid)),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Icon(Icons.perm_identity, color: Colors.white),
        Text("Profile"),
      ],
    ),
    color: Colors.blue,
    textColor: Colors.white,
    onPressed: () {
      print('clicked');
    },
  )),
SizedBox(
    width: 150,
    height: 150,
    child: TextButton(
        child: const Center(child: Text('Circular Button')),
        style: ButtonStyle(
            padding: MaterialStateProperty.all<EdgeInsets>(const EdgeInsets.all(16.0)),
            foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(RoundedRectangleBorder(borderRadius: BorderRadius.circular(75.0), side: const BorderSide(color: Colors.blue)))),
        onPressed: () {}),
  ),

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close