Top Related Projects
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.
A predictable state management library that helps implement the BLoC design pattern
A Flutter based game engine.
Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.
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
- 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,
);
}
}
- 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,
),
);
}
}
- 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
- Add the Rive dependency to your
pubspec.yaml
:
dependencies:
rive: ^0.9.1
- Import the Rive package in your Dart file:
import 'package:rive/rive.dart';
- 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
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.
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.
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.
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.
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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Rive Flutter
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:
- 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
- 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.
- 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.
Top Related Projects
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.
A predictable state management library that helps implement the BLoC design pattern
A Flutter based game engine.
Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.
Drift is an easy to use, reactive, typesafe persistence library for Dart & Flutter.
Promises for Swift & ObjC.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot