Flutter FloatingActionButton – Rectangle/Square Shape

Change shape of FloatingActionButton to Rectangle/Square

By default, the shape of FloatingActionButton is circle. But, if your application requires a Rectangle or Square shaped border, you can do that. Let us see how in the following example.

Example: Square Border shaped FloatingActionButton

Create a basic Flutter Application and replace code in main.dart file with the following code.

Observe floatingActionButton widget in the following code. The shape is provided with RoundedRectangleBorder(). Also, observe that we did not provide any border radius for this RoundedRectangleBorder() object. Hence, we could get a square border shape.


import 'package:flutter/material.dart';

void main() {
    home: MyApp(),

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> {

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Flutter Tutorial - googleflutter.com"),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        child: Icon(Icons.refresh),
        shape: RoundedRectangleBorder(),



In this Flutter Tutorial, we learned how to make the border shape of FloatingActionButton to square or rectangle.

Desclaimer: We are not affiliated, associated, authorized, endorsed by, or in any way officially connected with the Google, Apple or Flutter, or any of its subsidiaries or its affiliates. The names Google, Apple and Flutter as well as related names, marks, emblems and images are registered trademarks of their respective owners. This site googleflutter.com covers tutorials related to Flutter developed by Google.