custom_floating_action_button

This plugin allows you to create a FloatingActionButton with multiple options.

How to Use

# add this line to your dependencies
custom_floating_action_button: ^0.0.3

import 'package:custom_floating_action_button/custom_floating_action_button.dart';

//add custom floating action button on top of your scaffold
//minimum 2 and maximum 5 items allowed
  @override
  Widget build(BuildContext context) {
    return CustomFloatingActionButton(
      body: Scaffold(
        appBar: AppBar(
          title: const Text('appbar title'),
        ),
        body: Container(),
      ),
      options: const [
          CircleAvatar(
            child: Icon(Icons.height),
          ),
          CircleAvatar(
            child: Icon(Icons.title),
          ),
      ],
      type: CustomFloatingActionButtonType.circular,
      openFloatingActionButton: const Icon(Icons.add),
      closeFloatingActionButton: const Icon(Icons.close),
    );
  }

Screenshots

---

change button color

floatinButtonColor: Colors.blue,

---

make background transparent (default color is black54)

backgroundColor: Colors.transparent,

---

change type to horizontal

type: CustomFloatingActionButtonType.horizontal,

---

add any widget to options

options: const [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ),
                ),
                child: Text(
                  'demo',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              const SizedBox(
                width: 5,
              ),
              CircleAvatar(
                child: Icon(Icons.title),
              ),
            ],
          ),
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ),
                ),
                child: Text(
                  'demo',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              const SizedBox(
                width: 5,
              ),
              CircleAvatar(
                child: Icon(Icons.translate),
              ),
            ],
          ),
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ),
                ),
                child: Text(
                  'demo',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              const SizedBox(
                width: 5,
              ),
              CircleAvatar(
                child: Icon(Icons.event),
              ),
            ],
          ),
      ],

---

change type to vertical down

//you can add space from bottom and space from right
//maximum space from bottom is 500 and maximum space from right is 50
spaceFromBottom: 300,
type: CustomFloatingActionButtonType.verticalDown,

---

change type to vertical up

type: CustomFloatingActionButtonType.verticalUp,

Libraries

custom_floating_action_button