FLUTTER ECOSYSTEM

macielcr7/animated_float_action_button

macielcr7/animated_float_action_button open-source repository details.

animated_float_action_button 專案封面
Stars
5
Forks
2
最近推送(UTC)
2024年1月17日
專案狀態
未封存
Maciel Sousa GitHub avatar
GITHUB User

Maciel Sousa ↗

LocktecMaranguape - Ceará - Brasil官方網站 ↗
語言Dart

此儲存庫發佈的套件

使用的依賴

依賴清單 2 項
  • flutter{"sdk":"flutter"}
  • flutter_test開發依賴{"sdk":"flutter"}

原始 README

以下為英文專案原文快照,最新內容請造訪 GitHub。

展開 / 收合專案 README

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

https://raw.githubusercontent.com/macielcr7/animated_float_action_button/master/screen.gif

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