Flutter FloatingActionButton – Custom Shape

Custom Shape for FloatingActionButton

You can specify custom shaped backgrounds to FloatingActionButton like the one shown below.

All you need to do is some painting in the Canvas. Of course using Flutter.

floatingActionButton of Scaffold accepts shape property. We are going to build a custom ShapeBorder and assign this object to the shape property of FloatingActionButton.

Example 1: Custom Background Shape for FloatingActionButton

In this example, we are going to build a custom background shape for FloatingActionButton, as shown in the above figure.


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.settings_voice),
        shape: _CustomBorder(),

class _CustomBorder extends ShapeBorder {
  const _CustomBorder();

  EdgeInsetsGeometry get dimensions {
    return const EdgeInsets.only();

  Path getInnerPath(Rect rect, { TextDirection textDirection }) {
    return getOuterPath(rect, textDirection: textDirection);

  Path getOuterPath(Rect rect, { TextDirection textDirection }) {
    return Path()
      ..moveTo(rect.left + rect.width / 2.0, rect.top)
      ..lineTo(rect.right - rect.width / 3, rect.top + rect.height / 3)
      ..lineTo(rect.right, rect.top + rect.height / 2.0)
      ..lineTo(rect.right - rect.width / 3, rect.top + 2*rect.height / 3)
      ..lineTo(rect.left + rect.width  / 2.0, rect.bottom)
      ..lineTo(rect.left + rect.width / 3, rect.top + 2*rect.height / 3)
      ..lineTo(rect.left, rect.top + rect.height / 2.0)
      ..lineTo(rect.left + rect.width / 3, rect.top + rect.height / 3)

  void paint(Canvas canvas, Rect rect, { TextDirection textDirection }) {}

  // This border doesn't support scaling.
  ShapeBorder scale(double t) {
    return null;

We have created a new class _CustomBorder that extends ShapeBorder. In this class, we have to override some of the methods of ShapeBorder.

The method that we need to focus is getOuterPath(). In this method, we return a Path object. If you observe the above example, we have used moveTo(), lineTo() and close() methods to build the custom shape. Also, make sure that you do not specify a point outside the rectangle. We have to draw our custom shape in this rectangle.

Let us understand the code used to draw the shape.

moveTo(rect.left + rect.width / 2.0, rect.top) moves the pointer to top corner of the shape.

lineTo(rect.right - rect.width / 3, rect.top + rect.height / 3) draws line from the pointer to the corner between top and right.

lineTo(rect.right, rect.top + rect.height / 2.0) draws the line from previous pointer position to the right corner.

These three lines of code have drawn only 25% of the shape from top to right. The rest of the lineTo() method calls complete the shape and you have to close() the path at the end.



In this Flutter Tutorial, we learned how to provide a custom shape to FloatingActionButton of Scaffold.

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.