animated_float_action_button

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that enables the creation of a collapsible floating action button menu, allowing users to access multiple actions through a single expandable button. It provides smooth animations and customizable layouts for Android, iOS, Web, macOS, Windows, and Linux. Ideal for apps needing compact yet accessible navigation options. The package supports dynamic button addition and customization of appearance and behavior.

Use cases

Creating multi-action floating menus
Improving UI space efficiency
Enhancing mobile app navigation
Designing interactive gesture-based interfaces
Implementing animated action panels
Simplifying access to secondary features

Key features

Smooth expand/collapse animations
Customizable button layout
Support for multiple platforms
Dynamic button management
Configurable animation duration
Responsive touch interactions

Suitable for

Mobile app developers
UI/UX designers
Cross-platform applications
Apps with complex navigation
Developers seeking elegant floating buttons
Projects requiring animated user interfaces

Considerations

May impact performance with many buttons
Requires careful design for usability
Animation settings may need tuning
Not ideal for simple single-action needs
Limited built-in theming options
Potential accessibility challenges on small screens

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Getting Started

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

##Screenshots

Usage

To use this plugin:

In your flutter project add the dependency:

dependencies:
    ...
    animated_float_action_button: ^1.0.3

Example

//Import package
import 'package:animated_float_action_button/animated_floating_action_button.dart';
...
final GlobalKey<AnimatedFloatingActionButtonState> fabKey = GlobalKey();

Widget add() {
    return FloatActionButtonText(
      onPressed: (){
        fabKey.currentState.animate();
      },
      icon: Icons.add,
      text: "Ativar/Desativar Âncora",
      textLeft: -215,
    );
  }

  Widget image() {
    return FloatActionButtonText(
      onPressed: (){
        fabKey.currentState.animate();
      },
      icon: Icons.image,
      textLeft: -150,
      text: "Visualizar Rota",
    );
  }

  Widget inbox() {
    return FloatActionButtonText(
      onPressed: (){
        fabKey.currentState.animate();
      },
      icon: Icons.inbox,
      textLeft: -135,
      text: "Desbloquear",
    );
  }
...
Scaffold(
    floatingActionButton: AnimatedFloatingActionButton(
        key: fabKey,
        fabButtons: <Widget>[
            add(), 
            image(),
            inbox(),
        ],
        colorStartAnimation: Colors.blue,
        colorEndAnimation: Colors.red,
        animatedIconData: AnimatedIcons.menu_close //To principal button
    ),
)

Complete example here

Search packages, repositories and app categories

Install package