Flutter Circular Button

We use CircleBorder as shape property of a MaterialButton to create a circular button in Flutter. Wrap the button with a fixed size Container to adjust its height and width.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();

class _HomePageState extends State<HomePage> {

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Circular button'),
      body: SafeArea(
        child: Center(
          child: Container(
            width: 150,
            height: 150,
            child: MaterialButton(
              shape: CircleBorder(side: BorderSide(width: 1, color: Colors.blue, style: BorderStyle.solid)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.perm_identity, color: Colors.white),
              color: Colors.blueAccent,
              textColor: Colors.white,
              onPressed: (){
Scroll to Top