custom_floating_action_button 0.0.3 copy "custom_floating_action_button: ^0.0.3" to clipboard
custom_floating_action_button: ^0.0.3 copied to clipboard

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

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,
26
likes
120
pub points
82%
popularity

Publisher

unverified uploader

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

Repository (GitLab)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on custom_floating_action_button