Here’s an easy and stress free package that adds a diamond shaped Floating Action Button in flutter, It also aid in helping you add a triangular notched in the app bar.
Material Design Diamond FAB
A simple package for adding a Diamond Floating Action Button or FAB to a flutter application. This FAB also allows for a notch to be made inside of the Bottom Application Bar or Bottom Navigation Bar based on the positioning.
ADVERTISEMENT
Usage
Example
To use this package :
- add the dependency to your pubspec.yaml file.
dependencies: flutter: sdk: flutter diamond_notched_fab: ^0.0.1
To set diamond shaped FAB
//... fabButton() => DiamondNotchedFab( onPressed: (){}, backgroundColor: Colors.greenAccent, child: Icon(Icons.add), ); //...
Fetch Songs
//... bottomBar() => BottomAppBar( notchMargin: 8, shape: DiamondFabNotchedShape(), color: Colors.indigo, child: Container(height: 60.0), ); //...
GitHub
https://github.com/Jay53/Flutter-DiamondFab
Diamond Floating Action Button Example
import 'package:diamond_notched_fab/diamond_fab_notched_shape.dart'; import 'package:diamond_notched_fab/diamond_notched_fab.dart'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Example', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Diamond Fab'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: DiamondNotchedFab( onPressed: _incrementCounter, tooltip: 'Increment', backgroundColor: Colors.greenAccent, child: Icon(Icons.add), ), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, bottomNavigationBar: BottomAppBar( notchMargin: 8, shape: DiamondFabNotchedShape(), color: Colors.indigo, child: Container( height: 60.0, ), ), ); } }