How to make Circular Buttons in Flutter (2021)

Last updated on January 5, 2021 A Goodman Loading... One comment

Buttons are an indispensable part of mobile applications. In Flutter, buttons are rectangular in shape by default. However, in some cases, you may want your buttons to be circular to accentuate and blend in with the surrounding layout best.

This article shows you a few elegant ways to create circular buttons (also called round buttons) in Flutter.

Using ElevatedButton + ConstrainedBox

Preview:

The code:

ConstrainedBox(
              constraints: BoxConstraints.tightFor(width: 200, height: 200),
              child: ElevatedButton(
                child: Text('Button', style: TextStyle(fontSize: 24),),
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  shape: CircleBorder(),
                ),
              ),
            ),

If you want to explore more about ConstrainedBox, check this article: Flutter ConstrainedBox – Tutorial and Examples.

Using ElevatedButton + Container

The code:

ElevatedButton(
        style: ElevatedButton.styleFrom(
           shape: CircleBorder(), 
           primary: Colors.red
        ),
        child: Container(
          width: 200,
          height: 200,
          alignment: Alignment.center,
          decoration: BoxDecoration(shape: BoxShape.circle),
          child: Text(
            'I am a button',
            style: TextStyle(fontSize: 24),
          ),
        ),
        onPressed: () {},
)

Output:

Using MaterialButton

The code:

MaterialButton(
        color: Colors.blue,
        shape: CircleBorder(),
        onPressed: () {},
        child: Padding(
          padding: const EdgeInsets.all(100),
          child: Text(
            'A circle button',
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
        ),
)

Output:

Using ClipRRect + SizedBox + ElevatedButton

The code:

ClipRRect(
            borderRadius: BorderRadius.circular(120),
            child: SizedBox(
              width: 240,
              height: 240,
              child: ElevatedButton.icon(
                icon: Icon(Icons.camera, size: 40,),
                label: Text('Camera', style: TextStyle(fontSize: 25),),
                onPressed: () {},
              ),
            ),
),

Output:

An Old Method for RaisedButton

The RaisedButton widget is deprecated and only appears in old apps. If you’re working with a new Flutter project, use ElevatedButton instead.

Wrap a RaisedButton widget inside a square Container and using the BorderRadius class.

Sample code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Removing the debug banner when running on simulators
        debugShowCheckedModeBanner: false,
        title: 'An Aweasome App',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Home'),
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                // just an empty SizedBox to add some spacing
                SizedBox(height: 30,),

                Container(
                    // set width equal to height to make a square
                    width: 200,
                    height: 200,
                    child: RaisedButton(
                      color: Colors.orange,
                      shape: RoundedRectangleBorder(
                          // set the value to a very big number like 100, 1000...
                          borderRadius: BorderRadius.circular(100)),
                      child: Text('I am a button'),
                      onPressed: () {},
                    ))
              ],
            ),
          ),
        ));
  }
}

Output:

Conclusion

We went over several approaches to implement circular buttons in Flutter. If you would like to learn more about button stuff, take a look at the following articles: Working with ElevatedButton in Flutter 5 Way To Create Circle Icon Buttons in FlutterFlutter Cupertino Button.

You can also check out our Flutter category page or Dart category page for more tutorials and examples.

Subscribe
Notify of
guest
1 Comment
Inline Feedbacks
View all comments
Cr7.Coder
Cr7.Coder
10 months ago

ElevatedButton is new to me

Related Articles