Diamond Floating Action Button Using Flutter Android App

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

Diamond FAB (Floating Action Button) is a drop-in Package/Library for the Flutter framework that allows a developer to replace the aesthetics of the default round Floating Action Button with a Diamond shaped one. This Diamond FAB follows the Material Design Specification as seen in this article. The button features a 68 logical pixel default size as per the specification and a mini mode to decrease the size to 52 logical pixels. Included in the library is a default notch in the bottom application bar or bottom navigation bar depending on where the Floating Action Button is located in relation to this bottom bar. The FAB can be docked with the button bar which produces this open triangle notch and the size of this notch can be specified by the developer through the marginWidth property.

Diamond Floating Action Button Using Flutter Android App

Diamond Floating Action Button
Complete Code For Diamond Floating Action Button In Flutter
main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    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.blue[800],
        title: new Text("Rhombus shaped FloatingActionButton"),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.blue[800],
        onPressed: (){},
        child: Icon(Icons.home),
        shape: MyH0mePage(),
      ),
    );
  }
}

class MyH0mePage extends ShapeBorder {
  const MyH0mePage();
  @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.top + rect.height / 2.0)
      ..lineTo(rect.left + rect.width  / 2.0, rect.bottom)
      ..lineTo(rect.left, rect.top + rect.height / 2.0)
      ..close();
  }
  @override
  void paint(Canvas canvas, Rect rect, { TextDirection textDirection }) {}
  @override
  ShapeBorder scale(double t) {
    return null;
  }
}

Related Post