Custom Shape For Floating Action Button Using Flutter Android

admin_img Posted By Bajarangi soft , Posted On 06-11-2020

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.we are going to build a custom background shape for FloatingActionButton, as shown in the above figure.

Custom Shape For Floating Action Button Using Flutter Android

Custom Shape For Floating Action Button
Complete Code For Custom Shape For Floating Action Button In Flutter
main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

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

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.deepOrangeAccent,
        title: new Text(
            "Custom Shape For FLoatingAction Button"),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.deepOrangeAccent,
        onPressed: (){},
        child: Icon(Icons.settings_voice),
        shape: _CustomBorder(),
      ),
    );
  }
}


class _CustomBorder extends ShapeBorder {
  const _CustomBorder();

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

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

  @override
  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)
      ..close();
  }

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

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

Related Post