24 Oct 2024 Creating Dynamic Flutter Apps with Rive and Power BI Integration

What is Rive?

In the world of digital design and animation, Rive stands out as a versatile and powerful tool that connects designers and developers. Unlike many animation tools that are restricted to specific platforms, Rive works seamlessly across web, mobile, and embedded systems. This cross-platform compatibility makes it an excellent choice for teams looking to create interactive graphics that maintain consistency across various devices and operating systems.

What sets Rive apart is its unique ability to let users control animations both within the design tool and through code. Designers can create complex animations without needing to write any code, and developers can adjust these animations in response to user actions or data. This dual approach ensures that animations can be both creatively designed and dynamically adjusted, providing a high level of flexibility for interactive projects.

Here are some examples of what you can do with Rive, from simple button animations to complex animations that respond to user inputs:

Understanding How Rive Works

At the core of Rive is the Artboard, a flexible canvas where designers can create and organise their artwork. Artboards serve as the foundation for all animations, housing the visual elements such as shapes, images, and text, and defining their behaviours.

Rive’s animations are driven by State Machines, a system that manages how different animation states transition based on inputs and conditions. Inputs for these transitions can range from user interactions like clicks or touches, to real-time, data-driven updates, such as changing values.

This system enables Rive to create responsive animations that adapt to varying contexts and user interactions, making your designs more engaging and alive. For example, a progress bar could update in real time based on incoming data, or a character might switch between walking, running, or jumping, depending on user input.

Integrating Rive with Flutter

Integrating Rive with Flutter enhances mobile app development by enabling advanced animations. The Rive Flutter package makes it easy to embed these animations into your apps, offering two main approaches for implementation:

1. Pre-configured Animations in Rive

In this approach, you load the Artboard into your Flutter app with all animation logic pre-configured in Rive. Once the animation is set up in Rive, it runs as intended without needing further adjustments in the code. This method is the quickest way to implement animations, as you don’t need to program any additional controls or interactions.

However, you have no control over the animation once it’s embedded in the app. This approach is ideal for scenarios where a fast setup is needed, and the animation doesn’t need to change based on user interactions or app state.

2. Dynamic Control via Flutter

The approach offers complete control over the animation by enabling direct interaction with Rive’s State Machine and its inputs within Flutter. With this method, you can modify the animation in response to user actions, data updates, or other app events. While it provides greater flexibility, it requires more effort, as you must define the inputs and manage the State Machine in the code.

This approach is essential for applications where animations need to adapt dynamically to varying scenarios. However, it disables all the logic set in the Rive file, meaning that any configuration, listeners, or events set in the Rive file won’t be executed.

Rive in Power BI Custom Visuals

Rive’s versatility extends to data visualisation platforms like Power BI, where it can be used to create custom visuals. By leveraging TypeScript and Node.js, developers can build these custom visuals to incorporate interactive Rive animations. These visuals can dynamically respond to data, offering a more engaging and interactive way to present information that goes beyond static charts and graphs.

Integrating Power BI Custom Visuals Into A Flutter App Using Rive

The PBI package, developed internally by the team, brings seamless Power BI integration into our Flutter applications. This package allows you to embed Power BI reports directly into a Flutter app, with the option to include authentication if required. This seamless integration ensures secure access to your data, allowing users to view and interact with reports directly within the app.

As well as embedding reports, our PBI package supports smooth data loading from Power BI, enabling the creation of interactive, data-driven presentations that enhance your Flutter app’s overall functionality. With this package, you can deliver a comprehensive, attractive, and secure experience, providing users with a powerful way to access and interact with their Power BI reports.

Rive Proof-of-Concept Demo / Overview

We have developed a proof-of-concept (POC) application that showcases how Rive animations can be seamlessly integrated into both Flutter apps and Power BI reports. This POC includes five distinct animations, ranging from live data charts to more complex visualisations like animated icons and loading screens. These animations are integrated within an interactive dashboard, where user interactions trigger animations, highlighting key data points. This POC illustrates the powerful capabilities of Rive for creating interactive and visually appealing user experiences.

Pros of Using Rive

• Optimised File Size: One of Rive‘s standout features is its efficient file optimisation. You can create high-quality, complex animations that occupy minimal space, making it ideal for applications where performance and storage are crucial considerations.
• Easy Integration with Flutter: Setting up Rive animations in Flutter is straightforward, often requiring just a few lines of code.
• Structured Animation Workflow: Rive’s use of Artboards and State Machines makes it easy to manage different animation scenarios. This structured approach simplifies the creation of various interactive experiences, ensuring consistent user interactions across different parts of your application.
• Free version: Rive offers a free version that includes most of its powerful features. While premium options are available, the free version is robust enough for a wide range of projects.

Cons of Using Rive

• Complex Adaptations to Input Data: Whilst Rive excels at creating visually appealing animations, designing animations that adapt dynamically to varying input data can be challenging. Although it’s possible to implement such animations, it often requires external tools or multiple Rive animations to handle different scenarios effectively.
• Limited Community and Documentation: Rive’s community and documentation, although growing, are less extensive when compared to some other animation tools. This can make it more difficult to find support or examples, especially when tackling specific issues or advanced features.
• Potential Loading Issues: If not properly optimised, Rive animations can contribute to longer loading times, especially on lower-end devices. This can lead to initial lag or delays when displaying animations. It’s essential to optimise the setup carefully to ensure smooth performance and minimise any load-related disruptions.
• Free Version Limitations: With a free Rive account, you’re limited to three files. However, each file can contain multiple animations, so this limitation is manageable in most projects.

Conclusions

When the user experience is of paramount importance, tools like Rive can significantly enhance your project by transforming static designs into interactive, engaging animations. Here at ClearPeaks we excel at maximising the potential of Rive, seamlessly integrating it with other tools to deliver exceptional, standout experiences. Whether you’re looking to enhance a mobile app using Flutter, or to create captivating visualisations in Power BI, our expertise ensures that your projects will be engaging and valuable for users. Simply contact us today and our team will be happy to help!