Convert Figma logo to code with AI

2d-inc logoFlare-Flutter

Load and get full control of your Rive files in a Flutter project using this library.

2,554
469
2,554
138

Top Related Projects

Flutter runtime for Rive

Render After Effects animations natively on Android and iOS, Web, and React Native

Flutter package for creating awesome animations.

Quick Overview

Flare-Flutter is a powerful runtime animation library for Flutter applications. It allows developers to integrate and control vector animations created with the Flare design and animation tool directly in their Flutter projects. This library bridges the gap between designers and developers, enabling smooth, interactive animations in Flutter apps.

Pros

  • Seamless integration of vector animations into Flutter projects
  • Supports complex, interactive animations with runtime control
  • Reduces app size compared to traditional image-based animations
  • Enables closer collaboration between designers and developers

Cons

  • Requires familiarity with the Flare design tool for creating animations
  • Limited documentation and examples for advanced use cases
  • May have performance implications for very complex animations on low-end devices
  • Learning curve for developers new to working with vector animations

Code Examples

  1. Loading and displaying a simple Flare animation:
import 'package:flare_flutter/flare_actor.dart';

FlareActor(
  'assets/myAnimation.flr',
  animation: 'idle',
)
  1. Controlling animation playback:
import 'package:flare_flutter/flare_controls.dart';

final FlareControls controls = FlareControls();

FlareActor(
  'assets/myAnimation.flr',
  controller: controls,
)

// Later in your code:
controls.play('jump');
  1. Mixing Flutter widgets with Flare animations:
Stack(
  children: [
    FlareActor(
      'assets/background.flr',
      fit: BoxFit.cover,
      animation: 'idle',
    ),
    Center(
      child: Text('Hello, Flare!'),
    ),
  ],
)

Getting Started

To use Flare-Flutter in your project:

  1. Add the dependency to your pubspec.yaml:
dependencies:
  flare_flutter: ^3.0.2
  1. Import the package in your Dart file:
import 'package:flare_flutter/flare_actor.dart';
  1. Place your .flr file in an assets folder and declare it in pubspec.yaml:
flutter:
  assets:
    - assets/myAnimation.flr
  1. Use the FlareActor widget in your Flutter app to display and control the animation.

Competitor Comparisons

Flutter runtime for Rive

Pros of Rive-Flutter

  • More active development and maintenance
  • Better performance for complex animations
  • Supports runtime manipulation of animations

Cons of Rive-Flutter

  • Steeper learning curve for designers
  • Requires separate Rive editor for creating animations
  • Larger file size for animations

Code Comparison

Flare-Flutter:

FlareActor(
  "assets/animation.flr",
  animation: "idle",
)

Rive-Flutter:

RiveAnimation.asset(
  'assets/animation.riv',
  animations: ['idle'],
)

Both libraries offer similar ease of use when implementing animations in Flutter projects. However, Rive-Flutter provides more advanced features for runtime control and manipulation of animations, which may require additional code for complex use cases.

Rive-Flutter has largely superseded Flare-Flutter, as the Rive team (formerly 2Dimensions) has focused their efforts on the Rive platform. While Flare-Flutter is still functional, Rive-Flutter offers more features, better performance, and ongoing support, making it the preferred choice for most new projects requiring vector animations in Flutter.

Render After Effects animations natively on Android and iOS, Web, and React Native

Pros of Lottie-Android

  • Wider adoption and community support
  • More extensive documentation and examples
  • Better integration with design tools like Adobe After Effects

Cons of Lottie-Android

  • Limited to JSON-based animations
  • Larger file sizes for complex animations
  • Potential performance issues with very complex animations

Code Comparison

Flare-Flutter:

FlareActor(
  "assets/animation.flr",
  animation: "idle",
  fit: BoxFit.contain,
)

Lottie-Android:

LottieAnimationView(context).apply {
    setAnimation(R.raw.animation)
    loop(true)
    playAnimation()
}

Both libraries offer simple ways to integrate animations into your app, but Flare-Flutter uses a custom .flr file format, while Lottie-Android uses JSON files exported from After Effects.

Flare-Flutter provides a more integrated approach for creating and using animations within the Flutter ecosystem, while Lottie-Android offers broader compatibility across different platforms and design tools.

Lottie-Android has a larger user base and more extensive documentation, making it easier for beginners to get started. However, Flare-Flutter's tight integration with Flutter can lead to better performance and smaller file sizes for certain types of animations.

Ultimately, the choice between these libraries depends on your specific project requirements, design workflow, and target platform.

Flutter package for creating awesome animations.

Pros of simple_animations

  • Lightweight and easy to use, with a focus on simple, code-based animations
  • Provides a variety of pre-built animation types and easing functions
  • Supports custom tween animations and multi-track animations

Cons of simple_animations

  • Limited to code-based animations, lacking visual design tools
  • May require more manual coding for complex animations
  • Less suitable for intricate, character-based animations

Code Comparison

simple_animations:

PlayAnimation<double>(
  tween: Tween<double>(begin: 0.0, end: 200.0),
  duration: const Duration(seconds: 2),
  builder: (context, child, value) {
    return Container(
      width: value,
      height: value,
      color: Colors.blue,
    );
  },
)

Flare-Flutter:

FlareActor(
  "assets/animation.flr",
  animation: "idle",
  fit: BoxFit.contain,
)

simple_animations focuses on code-based animations, offering flexibility for simple to moderately complex animations. It's lightweight and easy to integrate into existing projects. Flare-Flutter, on the other hand, provides a more visual approach to animation design, with better support for complex, character-based animations. The code comparison shows that simple_animations requires more manual setup, while Flare-Flutter relies on pre-designed animations loaded from asset files.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

:warning:Please migrate to the new Rive Flutter runtime. This runtime is for the old Rive (formerly Flare) and will only receive updates for breaking issues with Flutter and egregious bugs. New features and updates are only planned for the new Rive.

Rive 1 (previously Flare)

Rive 1 (previously Flare) offers powerful realtime vector design and animation for app and game designers alike. The primary goal of Flare is to allow designers to work directly with assets that run in their final product, eliminating the need to redo that work in code.

Null Safety

Preview of null safety is now available on pub.dev with version 3.0.0. Include it in your pubspec via:

  dependencies:
    flare_flutter: ^3.0.0-nullsafety.0

Packages

There used to be two Dart packages provided in this repository. flare_dart is no longer maintained as a separate package, it has now been rolled into flare_flutter. Please use only flare_flutter going forward.

Examples

Take a look at the provided example applications.

Please note that only the simple, change_color, and teddy have been updated to null safety.

License

See the LICENSE file for license rights and limitations (MIT).