Description:

custom floating action button

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
copied to clipboard
import 'package:custom_floating_action_button/custom_floating_action_button.dart';
copied to clipboard
//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),
);
}
copied to clipboard
Screenshots #






change button color #
floatinButtonColor: Colors.blue,
copied to clipboard


make background transparent (default color is black54) #
backgroundColor: Colors.transparent,
copied to clipboard


change type to horizontal #
type: CustomFloatingActionButtonType.horizontal,
copied to clipboard


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),
),
],
),
],
copied to clipboard


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,
copied to clipboard


change type to vertical up #
type: CustomFloatingActionButtonType.verticalUp,
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter