An animation Framework for Flutter. It is state-based, declarative, extensible, composable and easy to use.

Overview

CI pub.dev

⚠️ This package is in an early state of development. If you find any bugs or have any suggestions, please open an issue.

Fleet is an animation framework for Flutter.

  • State-based: Animate transitions from one state to another.
  • Declarative: Describe an animation and apply it to a state change. No need to manage AnimationControllers or Tweens.
  • Animatable widgets: Comes out of the box with general purpose widgets that support animating with Fleet.
    • Extensible: Any widget can be made to support animating with Fleet.
    • Flexible: Animatable widgets can be used with or without animations.
    • Composable: Widgets that build on animatable widgets are automatically animatable.
    • Animate parameters individually: Animate parameters of animatable widget individually, e.g. with different curves.
  • User-friendly: Add and change animations with little refactoring.

Getting started

  1. Add Fleet to your pubspec.yaml:
flutter pub add fleet
  1. Add FleetBinding.ensureInitialized() to your main function:
import 'package:fleet/fleet.dart';
import 'package:flutter/material.dart';

void main() {
  FleetBinding.ensureInitialized();
  runApp(MyApp());
}

You need to use this binding instead of WidgetsFlutterBinding.

This step is currently necessary because of functionality that Fleet requires, but that is not available in Flutter. This step will become unnecessary if and when the required functionality becomes available in Flutter. Unfortunately, this also means that until that point, animations that use Fleet will not work in tests. The reason is that the test bindings cannot be extended in the same way that WidgetsFlutterBinding can be. You can still use Fleet in tests but animated values will immediately jump to their final value.

Now you're ready to use Fleet in your Flutter app.

Take a look a the examples or continue to the introduction to Fleet.

Introduction

Fleet has been heavily inspired by the animation framework that comes with SwiftUI. If you are familiar with it, you will find most concepts familiar.

I'm going to walk you through adding a simple animation to a widget. Below is the unanimated version of the widget:

import 'package:fleet/fleet.dart';
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  var _active = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _active = !_active;
        });
      },
      child: ColoredBox(
        color: _active ? Colors.blue : Colors.grey,
      ),
    );
  }
}

Now lets animate the state change of _active:

-class _MyWidgetState extends State<MyWidget> {
+class _MyWidgetState extends State<MyWidget> with AnimatingStateMixin {
   var _active = false;

   @override
   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: () {
-        setState(() {
+        setStateAsync(animation: Curves.ease.animation(250.ms), () {
           _active = !_active;
         });
       },
-      child: ColoredBox(
+      child: AColoredBox(
         color: _active ? Colors.blue : Colors.grey,
       ),
     );
   }
 }

We made the following changes:

  1. Mixin AnimatingStateMixin to _MyWidgetState, so we can use setStateAsync.
  2. Use setStateAsync to specify the animation that we want to apply to the state change.
  3. Use AColoredBox instead of ColoredBox.

The AColoredBox widget is a drop-in replacement for ColoredBox that supports animating with Fleet. Widgets that support animating with Fleet don't have any special parameters related to animation and can be used without animation, just as well.

Fleet provides drop-in replacements for a number of generally useful Flutter framework widgets (all with the prefix A). Any widget can be made to support state-based animation through components provided by Fleet (see AnimatableStateMixin). Issues or PRs for adding support for more widgets are welcome!

Note that we did not explicitly tell setStateAsync what to animate. This is because Fleet uses a state-based approach. All state changes caused by executing the provided callback will be animated. Even the state changes which are indirect, like the color parameter of AColoredBox going from Colors.grey to Colors.blue. Fleet does this by tracking the state of animatable parameters of animatable widgets from one build to the next.

setStateAsync is a little bit special in that it does not immediately execute the callback, like it is the case for setState. Instead, setStateAsync executes the callback as part of building the next frame.

Curves.ease.animation(250.ms) creates an AnimationSpec that we pass to setStateAsync to specify how to animate from the old to the new state.

.animate is an extension method on Curve that creates an AnimationSpec form the curve. It optionally takes a Duration. For a nicer syntax for specifying Durations, Fleet provides extensions on int, e.g 250.ms is equivalent to Duration(milliseconds: 250).

Animatable widgets

The following drop-in replacements for Flutter framework widgets are provided for animating with Fleet:

  • AAlign
  • AColoredBox
  • AContainer
  • AOpacity
  • APadding
  • APositioned
  • APositionedDirectional
  • ASizedBox
  • ASliverOpacity
  • ASliverPadding
  • ATransform

Gabriel TerwestenGitHub @blaugoldTwitter @GTerwestenMedium @gabriel.terwesten

You might also like...

🔥🔥🔥 Easy to build an animation set

🔥🔥🔥 Easy to build an animation set

✨ Flutter Animation Set [Lanuage ~~] English | 中文文档 Simplified Flutter stagger animation.To drive the Flutter stagger animation through a timeline in

Oct 31, 2022

Create powerful animations in Flutter and use the hero animation for complex animations

Create powerful animations in Flutter and use the hero animation for complex animations

Hero Animation - Locations UI - Flutter Create powerful animations in Flutter and use the hero animation for complex animations. ⚡  Social Media  Twit

Dec 11, 2021

✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web

✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web

Flutter EasyLoading English | 简体中文 Live Preview 👉 https://nslog11.github.io/flutter_easyloading Installing Add this to your package's pubspec.yaml fi

Jan 9, 2023

Flutter animation curves visualizer based on a CustomPainter

Flutter animation curves visualizer based on a CustomPainter

Flutter animation curves visualizer based on a CustomPainter

Mar 9, 2022

Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Apr 16, 2021

Flexible and easy to use page transitions.

Flexible and easy to use page transitions.

flutter_villains What are heroes without villains? (Profile image from: https://unsplash.com/photos/pAs4IM6OGWI) Check out the article. What are villa

Dec 12, 2022

A customizable and easy to use UI widgets to help develop apps faster

A customizable and easy to use UI widgets to help develop apps faster

Lenore UI Beautiful, customizable and easy to use UI widgets to help me (or maybe you) develop my (or maybe your) apps faster. This is my personal pac

Nov 4, 2022

Easy to use, customizable and pluggable Theme Provider.

Easy to use, customizable and pluggable Theme Provider.

theme_provider Easy to use, customizable Theme Provider. This provides app color schemes throughout the app and automatically rebuilds the UI dynamica

Dec 10, 2022

An easy way to use AnimationController with Curve.

An easy way to use AnimationController with Curve.

CurvedAnimationController An easy way to use AnimationController with Curve. Getting Started Add dependency in your flutter project. $ flutter pub add

Nov 23, 2021
Comments
  • Get support for transaction into Flutter

    Get support for transaction into Flutter

    Currently, FleetBinding must be used instead of WidgetsFlutterBinding for animations to work. Ideally, Flutter would support transactions, so users don't need to use this binding and animations properly work in tests.

    opened by blaugold 1
  • Ensure animations finish at target value

    Ensure animations finish at target value

    When animations are repeated with reverse and an even repeat count, they currently don't finish at the target value and instead finish at the start value.

    bug 
    opened by blaugold 0
  • Open questions

    Open questions

    How can we support the following use cases?

    • Stopping animations
    • Reacting to animation end
    • Get current value of animation
    • Pausing/resuming animation
    • Animating individual components of composite values (e.g. Offset.dx)
    opened by blaugold 0
  • Add more drop-in replacements for Flutter framework widgets

    Add more drop-in replacements for Flutter framework widgets

    Consider adding the widgets listed below.

    ImplicitlyAnimatedWidget

    • AnimatedTheme
    • AnimatedCrossFade
    • AnimatedSwitcher

    AnimatedWidget

    • AnimatedModalBarrier

    Basic widgets

    • Opacity ✅
    • ClipRRect
    • PhysicalModel
    • PhysicalShape
    • Transform ✅
    • FittedBox
    • FractionalTranslation
    • Padding ✅
    • Align ✅
    • Center
    • SizedBox ✅
    • ConstrainedBox
    • ConstraintTransformBox
    • UnconstrainedBox
    • FractionallySizedBox
    • LimitedBox
    • OverflowBox
    • SizedOverflowBox
    • AspectRatio
    • IntrinsicWidth
    • Baseline
    • SliverPadding ✅
    • Stack
    • IndexedStack
    • Positioned ✅
    • PositionedDirectional ✅
    • Wrap
    • RichText
    • RawImage
    • ColoredBox ✅
    • SliverOpacity ✅

    Other

    • DecoratedBox
    • Text
    • Image
    • Container ✅
    enhancement 
    opened by blaugold 0
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration. pub package Getting Started

Hasan Mohammed 91 Dec 20, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 357 Dec 27, 2022
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

MELLATI Fatah 225 Dec 22, 2022
BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation before clone the GitHub repository please give a star o

Blackshadow Software Ltd 11 Sep 1, 2022
Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman Fishing Animation before clone the GitHub repository please give a sta

Blackshadow Software Ltd 9 Oct 27, 2022
Nubank card animation - Nubank card animation built with flutter

Nubank card animation Project | Technologies | How to run | How to contribute ??

Lucas da Silva Barbosa 8 Nov 6, 2022
Fade animation - Add fade animation to your app easily

fade_animation Add fade animation to your app easily using simple_animations pac

Mazouzi Aymene 3 Oct 6, 2022
IntroAnimationSlider - A simple Flutte Animation Introduction for Mobile app easy to implement Using intro Views flutter

introappanimation simple Flutte Animation Introduction for Mobile app easy to im

null 3 Sep 22, 2022
🔥🔥🔥 Easy to build an animation set

✨ Flutter Animation Set [Lanuage ~~] English | 中文文档 Simplified Flutter stagger animation.To drive the Flutter stagger animation through a timeline in

YYDev 271 Oct 31, 2022