Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Components Floating Action Button

Diamond Shaped Floating Action Button in Flutter

August 7, 2020
in Floating Action Button, Inputs
2 min read
Diamond Shaped Floating Action Button in Flutter

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.

RELATED FLUTTER RESOURCES

A Verification Code Input Widget to get Value in Flutter.

A Flutter Package to Select Days in a Week – Day Picker

A Simple Flutter Sliding Switch – Like A Toggle Button

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

RelatedFlutter Resource

A Verification Code Input Widget to get Value in Flutter.
Flutter Packages

A Verification Code Input Widget to get Value in Flutter.

September 7, 2020
A Flutter Package to Select Days in a Week – Day Picker
Animations

A Flutter Package to Select Days in a Week – Day Picker

August 16, 2020
A Simple Flutter Sliding Switch – Like A Toggle Button
Flutter Packages

A Simple Flutter Sliding Switch – Like A Toggle Button

August 16, 2020
How to Create a Dotted Line View with flutter
Flutter Packages

How to Create a Dotted Line View with flutter

August 16, 2020
How to Create a Rounded/Circular Button (Border-radius) In Flutter
Buttons

How to Create a Rounded/Circular Button (Border-radius) In Flutter

August 11, 2020
Flutter Custom Form Builder Package – Create Full Complex Form
Flutter Packages

Flutter Custom Form Builder Package – Create Full Complex Form

August 9, 2020
Next Post
Create a Beautiful & Customized Tab/Toggle in Flutter

Create a Beautiful & Customized Tab/Toggle in Flutter

How to remove debug banner in flutter on android emulator?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

custom fonts text style flutter

Flutter Custom Fonts and How to Style Text

July 24, 2020
How to Create a Dotted Line View with flutter

How to Create a Dotted Line View with flutter

August 16, 2020
A Flutter package to get Instagram user details and download reels videos

A Flutter package to get Instagram user details and download reels videos

August 8, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In