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; } }