Flutter FloatingActionButton – Rounded Rectangle Shape

Change shape of Flutter FloatingActionButton to Rounded Rectangle

The shape of FloatingActionButton is circular by default. But, you can provide a Rectangle border shape with rounded corners.

In this tutorial, we will learn how to define a rounded rectangle shape for FloatingActionButton.

Define the shape of floatingActionButton with RoundedRectangleBorder(). Provide borderRadius with required radius value as shown in the following example.

Example: Rounded Rectangle Shape Border to FloatingActionButton

To recreate this example, create a basic Flutter Application and replace the code in your main.dart with the following code.


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(
            borderRadius: BorderRadius.all(Radius.circular(15.0))


The border shape of FloatingActionButton is Rectangle with rounded corners. You may change the radius value and observe the output.


In this Flutter Tutorial, we learned how to change the border shape of FloatingActionButton to rounded 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.