Convert Figma logo to code with AI

rive-app logorive-flutter

Flutter runtime for Rive

1,188
185
1,188
39

Top Related Projects

12,427

A powerful HTTP client for Dart and Flutter, which supports global settings, Interceptors, FormData, aborting and canceling a request, files uploading and downloading, requests timeout, custom adapters, etc.

11,696

A predictable state management library that helps implement the BLoC design pattern

9,141

A Flutter based game engine.

10,221

Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.

2,542

Drift is an easy to use, reactive, typesafe persistence library for Dart & Flutter.

Promises for Swift & ObjC.

Quick Overview

Rive-Flutter is a Flutter runtime library for Rive, a real-time interactive design and animation tool. It allows developers to easily integrate and control Rive animations in their Flutter applications, providing a seamless way to add rich, interactive animations to mobile and web projects.

Pros

  • Smooth integration of complex animations into Flutter apps
  • Real-time manipulation and interaction with animations
  • Efficient performance due to Rive's optimized runtime
  • Cross-platform support (iOS, Android, web)

Cons

  • Learning curve for those unfamiliar with Rive's animation system
  • Dependency on external Rive editor for creating animations
  • Limited customization options compared to writing animations from scratch
  • Potential increase in app size due to animation assets

Code Examples

  1. Loading and displaying a simple Rive animation:
import 'package:rive/rive.dart';

class SimpleAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const RiveAnimation.asset(
      'assets/truck.riv',
      fit: BoxFit.cover,
    );
  }
}
  1. Controlling animation state:
class ControlledAnimation extends StatefulWidget {
  @override
  _ControlledAnimationState createState() => _ControlledAnimationState();
}

class _ControlledAnimationState extends State<ControlledAnimation> {
  SMITrigger? _bump;

  void _onRiveInit(Artboard artboard) {
    final controller = StateMachineController.fromArtboard(artboard, 'bumpy');
    artboard.addController(controller!);
    _bump = controller.findInput<bool>('bump') as SMITrigger;
  }

  void _hitBump() => _bump?.fire();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _hitBump,
      child: RiveAnimation.asset(
        'assets/truck.riv',
        onInit: _onRiveInit,
      ),
    );
  }
}
  1. Using Rive animation as a background:
class AnimatedBackground extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
          child: RiveAnimation.asset(
            'assets/background.riv',
            fit: BoxFit.cover,
          ),
        ),
        Center(
          child: Text('Foreground Content'),
        ),
      ],
    );
  }
}

Getting Started

  1. Add the Rive dependency to your pubspec.yaml:
dependencies:
  rive: ^0.9.1
  1. Import the Rive package in your Dart file:
import 'package:rive/rive.dart';
  1. Use the RiveAnimation widget to display your Rive animation:
RiveAnimation.asset(
  'assets/your_animation.riv',
  fit: BoxFit.cover,
)

Make sure to add your .riv files to the assets folder and declare them in your pubspec.yaml under the assets section.

Competitor Comparisons

12,427

A powerful HTTP client for Dart and Flutter, which supports global settings, Interceptors, FormData, aborting and canceling a request, files uploading and downloading, requests timeout, custom adapters, etc.

Pros of dio

  • More versatile for general HTTP requests and API interactions
  • Supports interceptors, allowing for request/response manipulation
  • Extensive documentation and active community support

Cons of dio

  • Not specialized for animation or graphics rendering
  • May require additional libraries for complex UI interactions
  • Steeper learning curve for beginners due to its extensive features

Code Comparison

dio example:

import 'package:dio/dio.dart';

final dio = Dio();
final response = await dio.get('https://api.example.com/data');
print(response.data);

rive-flutter example:

import 'package:rive/rive.dart';

final riveAnimation = RiveAnimation.asset(
  'assets/animation.riv',
  fit: BoxFit.cover,
);

Summary

dio is a powerful HTTP client for Dart and Flutter, offering robust features for API interactions. rive-flutter, on the other hand, is specifically designed for integrating Rive animations into Flutter apps. While dio excels in data fetching and manipulation, rive-flutter provides a streamlined solution for adding interactive animations to user interfaces. The choice between the two depends on the project's specific requirements: dio for network operations and API integrations, and rive-flutter for enhancing UI with complex animations.

11,696

A predictable state management library that helps implement the BLoC design pattern

Pros of bloc

  • Provides a robust state management solution for Flutter apps
  • Encourages separation of concerns and clean architecture
  • Has extensive documentation and a large community

Cons of bloc

  • Steeper learning curve for beginners
  • Can lead to boilerplate code for simple use cases
  • May be overkill for small projects

Code Comparison

bloc:

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<Increment>((event, emit) => emit(state + 1));
    on<Decrement>((event, emit) => emit(state - 1));
  }
}

rive-flutter:

final riveFile = await RiveFile.asset('assets/truck.riv');
final artboard = riveFile.mainArtboard;
artboard.addController(SimpleAnimation('idle'));
Rive(artboard: artboard);

Key Differences

  • bloc focuses on state management and business logic
  • rive-flutter is primarily for animations and interactive graphics
  • bloc is more versatile for general app development
  • rive-flutter excels in creating engaging user interfaces and animations

Use Cases

bloc:

  • Complex app architectures
  • Apps with multiple interconnected states
  • Projects requiring scalable state management

rive-flutter:

  • Interactive animations
  • Games and educational apps
  • Apps with rich, dynamic user interfaces

Both libraries serve different purposes and can be used together in a Flutter project to create feature-rich, visually appealing applications with robust state management.

9,141

A Flutter based game engine.

Pros of Flame

  • More comprehensive game development framework with features like collision detection, particles, and audio
  • Larger community and ecosystem with more plugins and extensions
  • Better suited for complex game logic and mechanics

Cons of Flame

  • Steeper learning curve for beginners
  • May be overkill for simple animations or interactive UI elements
  • Less focused on vector graphics and runtime animations

Code Comparison

Flame example:

class MyGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    add(Player());
    add(Enemy());
  }
}

Rive Flutter example:

RiveAnimation.asset(
  'assets/animations/character.riv',
  animations: ['idle', 'walk'],
  controllers: [SimpleAnimation('idle')],
)

Flame is more suited for building complete games with multiple components, while Rive Flutter excels at integrating pre-designed animations into Flutter apps. Flame requires more code to set up a game structure, whereas Rive Flutter focuses on easily implementing and controlling animations created in the Rive editor.

Flame is ideal for developers who need full control over game logic and want to build complex interactive experiences. Rive Flutter is better for designers and developers looking to quickly implement high-quality animations with minimal code.

10,221

Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.

Pros of GetX

  • Comprehensive state management, routing, and dependency injection solution
  • Lightweight and performant, with minimal boilerplate code
  • Extensive documentation and active community support

Cons of GetX

  • Steeper learning curve due to its all-in-one approach
  • Potential for overuse, leading to less maintainable code
  • Less focused on specific animation capabilities compared to Rive Flutter

Code Comparison

GetX example:

class Controller extends GetxController {
  var count = 0.obs;
  increment() => count++;
}

class HomePage extends StatelessWidget {
  final Controller c = Get.put(Controller());

Rive Flutter example:

class _MyHomePageState extends State<MyHomePage> {
  Artboard _riveArtboard;
  RiveAnimationController _controller;

  @override
  void initState() {
    super.initState();

GetX offers a more streamlined approach to state management and dependency injection, while Rive Flutter focuses on complex animations and interactive graphics. GetX provides a unified solution for various app development aspects, whereas Rive Flutter excels in creating and manipulating vector animations. The choice between the two depends on the specific needs of your project, with GetX being more suitable for overall app architecture and Rive Flutter for advanced animation requirements.

2,542

Drift is an easy to use, reactive, typesafe persistence library for Dart & Flutter.

Pros of drift

  • Focused on local database management, providing a type-safe and reactive database layer
  • Offers code generation for type-safe database queries and schema management
  • Supports custom SQL queries and complex join operations

Cons of drift

  • Limited to database operations, lacking animation and UI capabilities
  • Steeper learning curve for developers new to SQL or ORM concepts
  • May require additional libraries for UI rendering and animations

Code Comparison

drift:

@DataClassName('Todo')
class Todos extends Table {
  IntColumn get id => integer().autoIncrement()();
  TextColumn get title => text().withLength(min: 6, max: 32)();
  BoolColumn get completed => boolean().withDefault(const Constant(false))();
}

rive-flutter:

final riveFile = await RiveFile.asset('assets/truck.riv');
final artboard = riveFile.mainArtboard;
artboard.addController(SimpleAnimation('idle'));
Rive(artboard: artboard);

While drift focuses on database operations with type-safe queries, rive-flutter specializes in vector animations and interactive graphics. drift is ideal for apps requiring local data persistence and complex queries, whereas rive-flutter excels in creating engaging, interactive UI elements and animations.

Promises for Swift & ObjC.

Pros of PromiseKit

  • Mature and widely adopted library for asynchronous programming in Swift and Objective-C
  • Extensive documentation and community support
  • Seamless integration with Apple's APIs and frameworks

Cons of PromiseKit

  • Limited to iOS and macOS development, unlike Rive Flutter's cross-platform capabilities
  • Steeper learning curve for developers new to functional programming concepts
  • May introduce additional complexity for simple asynchronous tasks

Code Comparison

PromiseKit:

firstly {
    fetchUser()
}.then { user in
    fetchAvatar(for: user)
}.done { avatar in
    self.imageView.image = avatar
}.catch { error in
    self.showError(error)
}

Rive Flutter:

RiveAnimation.asset(
  'assets/animations/example.riv',
  animations: ['idle'],
  controllers: [SimpleAnimation('idle')],
  onInit: (_) => print('Animation initialized'),
)

While PromiseKit focuses on handling asynchronous operations and chaining promises, Rive Flutter is specifically designed for integrating and controlling vector animations in Flutter applications. The code examples demonstrate their distinct purposes and syntax differences.

PromiseKit excels in managing complex asynchronous workflows, while Rive Flutter simplifies the process of adding interactive animations to cross-platform mobile apps. The choice between these libraries depends on the specific requirements of your project and the target platform.

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

Pub Version Build Status Discord badge Twitter handle

Rive Flutter

Rive hero image

Rive Flutter is a runtime library for Rive, a real-time interactive design and animation tool.

This library allows you to fully control Rive files with a high-level API for simple interactions and animations, as well as a low-level API for creating custom render loops for multiple artboards, animations, and state machines in a single canvas.

Table of contents

Overview of Rive

Rive is a powerful tool that helps teams create and run interactive animations for apps, games, and websites. Designers and developers can use the collaborative editor to create motion graphics that respond to different states and user inputs, and then use the lightweight open-source runtime libraries, like Rive Flutter, to load their animations into their projects.

For more information, check out the following resources:

:house_with_garden: Homepage

:blue_book: General help docs

🛠 Rive Forums

Getting started

To get started with Rive Flutter, check out the following resources:

For more information, see the Runtime sections of the Rive help documentation:

More advanced usage:

Choosing a Renderer

For more information see: https://rive.app/community/doc/overview/docD20dU9Rod

Note on the Impeller renderer

Starting in Flutter v3.10, Impeller has replaced Skia to become the default renderer for apps on the iOS platform and may continue to be the default on future platforms over time. As such, there is a possibility of rendering and performance discrepancies when using the Rive Flutter runtime with platforms that use the Impeller renderer that may not have surfaced before. If you encounter any visual or performance errors at runtime compared to expected behavior in the Rive editor, we recommend trying the following steps to triage:

  1. Try running the Flutter app with the --no-enable-impeller flag to use the Skia renderer. If the visual discrepancy does not show when using Skia, it may be a rendering bug on Impeller. However, before raising a bug with the Flutter team, try the second point below👇
flutter run --no-enable-impeller
  1. Try running the Flutter app on the latest master channel. It is possible that visual bugs may be resolved on the latest Flutter commits, but not yet released in the beta or stable channel.
  2. If you are still seeing visual discrepancies with just the Impeller renderer on the latest master branch, we recommend raising a detailed issue to the Flutter Github repo with a reproducible example, and other relevant details that can help the team debug any possible issues that may be present.

Supported platforms

Be sure to read the platform specific considerations for the Rive Flutter package.

Awesome Rive

For even more examples and resources on using Rive at runtime or in other tools, checkout the awesome-rive repo.

Contributing

We love contributions and all are welcome! 💙

Issues

Have an issue with using the runtime, or want to suggest a feature/API to help make your development life better? Log an issue in our issues tab! You can also browse older issues and discussion threads there to see solutions that may have worked for common problems.