Summary

The web content discusses implementing a cool rive background animation in Flutter apps, along with an overview of related technical articles and resources, and instructions on how to follow the author, Fred Grott, for more insights.

Abstract

The article "Cool Rive Background Animation In Flutter Apps" delves into the technique of incorporating an engaging animated background into Flutter applications using rive animations, extending beyond the basic background image trick. It emphasizes the importance of mastering advanced techniques for professional app development and provides a collection of resources and tutorials on various topics, including DevOPS, visual animations, and best practices for Flutter development. The author, Fred Grott, shares links to his work on platforms like Medium, GitHub, and social media, and encourages readers to follow him for ongoing updates. The article also includes code snippets and a video demonstration of the animation in action, as well as outlining the limitations of the current approach and plans for future enhancements.

Opinions

The author believes that Google's introduction to widgets is not sufficient for professional application development and advocates for a deeper understanding of techniques such as rive animations.
Fred Grott sees his role as providing practical knowledge through medium articles and his book series to encourage developers to engage with more complex subjects like DevOPS, OOP, FP, and code coverage.
The author values the community aspect of development, suggesting readers join forums and social platforms to stay informed about his latest articles and contributions.
Grott acknowledges the work of other developers, such as Jimmy Aumard, whose patterns and code he reuses, highlighting the importance of collaboration and sharing in the developer community.
He points out that the current implementation of the animation controller is not yet integrated with app or view state management, indicating a direction for future development and articles.
The author is committed to creating a comprehensive set of resources and tutorials that serve as a Rosetta Stone for Flutter design and architecture, aiming to provide solutions to both code and visual design problems.

Cool Rive Background Animation In Flutter Apps

This combines the background image trick android workaround and extends it to put a rive animation in the background.

Background

The problem is while Google does an excellent job at giving you an introduction to widgets; it’s not the techniques you really need to have mastered to develop a professional application and in a mature market. That is my self-assigned job in pushing out medium articles and my flutter design and development book series.

I am finding that by showing the cool visual and animation that I can get you guys and gals to do the boring devOPS and OOP and FP to get you to the point for flutter expert. Some of the subjects covered are:

DevOPS

Tuning A Cheap MS Windows Laptop for Flutter Development https://readmedium.com/tuning-a-cheap-ms-windows-laptop-for-flutter-app-development-572d09cd4d19

Log Driven Learning Flutter https://readmedium.com/log-driven-learning-flutter-d76b49b75a8c

UML Coolness in Flutter https://itnext.io/uml-coolness-in-flutter-6bb14217b5f2

Lint Like A Boss https://itnext.io/lint-like-a-boss-60b85e82c227

McCabe Cycles in Flutter https://readmedium.com/mccabe-cycles-in-flutter-3aa913e19428

Getting Real Code Coverage https://readmedium.com/getting-real-code-coverage-951231afa2bc

Lcov on Windows https://readmedium.com/lcov-on-windows-7c58dda07080

Test Secrets, Test Suites https://itnext.io/test-secrets-test-suites-99f8390b8d4b

How To, Flutter Internal Packages https://itnext.io/how-to-flutter-internal-packages-cad1285fe8c

An Architecture Layout https://readmedium.com/an-architecture-layout-8f414271b2b4

Logging, The Expert Way https://readmedium.com/logging-the-expert-way-5beb5c967e44

Catch Flutter Application Exceptions https://itnext.io/catch-flutter-application-exceptions-cad036d0fd4e

Flutter Perfect SetUp https://readmedium.com/flutter-perfect-setup-c5462b412f78

Cool Flutter Docs https://readmedium.com/cool-flutter-docs-383b951d7feb

Visual

Animations Users Love(rive) https://readmedium.com/animations-users-love-75a57a8cad5

Full Flutter Background Trick https://readmedium.com/full-flutter-background-trick-d1ea813470d2

Since, my articles appear in multiple publications the best way to keep updated to those posting is to join one of these social platforms and follow me using my profile links:

LinkedIN https://www.linkedin.com/in/fredgrottstartupfluttermobileappdesigner/

Xing https://www.xing.com/profile/Fred_Grott/cv

Discord https://discordapp.com/users/9388/

Gitter(join this forum to get the article links) https://gitter.im/flutter/flutter

Slack https://app.slack.com/client/TGT6YF2J1/CGS4QDJ56/user_profile/UHK8PNRGU

Twitter https://twitter.com/fredgrott

Medium https://fredgrott.medium.com

Reddit FlutterDev Subedit(just join this forum and you will get the notices via reddit) https://www.reddit.com/r/FlutterDev/

As always, the code to both the articles and the books can be found at:

flutter design and arch rosetta at Github https://github.com/fredgrott/flutter_design_and_arch_rosetta

And, the plugins I contribute to are

Flutter Platform Widgets https://github.com/stryder-dev/flutter_platform_widgets

Flutter Rive(player) Plugin https://github.com/rive-app/rive-flutter

In The Beginning

In the beginning, we have the same exact trick as in the article:

Full Flutter Background Trick https://readmedium.com/full-flutter-background-trick-d1ea813470d2

This time we are going to instead use a rive animation.

The Animation

The animation I am using is by Bobbeh at:

https://rive.app/community/224-424-luke-vs-darth/

Now for some rive basics.

Rive sources can be svg images, Lottie files, and flame flr files. And, you use the rive studio to load them and animate them, Then you export the file as a riv file.

Each riv file has one blackboard but can have multiple artboards. Thus, typically to create an app bar you will have the entry and exit animations as paired in one artboard and usually, each artboard is a step and thus one riv file for a full app bar.

Now for some code.

Code Tricks

The patterns I am re-using are from the rive_loading plugin by Jimmy Aumard. Jimmy has set up a less error-prone approach to loading the riv file and playing it on the rive-player in flutter.

I modified Jimmy’s controller code as there are three enum values the animation loop can have, namely oneShot, loop, and pingPong:

Notice, that there is a default loop value so 3end dev doesn’t supply the loop value.

And, the second part is the loader. And, I re-use Jimmy’s setup as we properly wrap it up in full futures

error handling:

And rest of those pairs are in my rive_utilities in my internal_packages sub-folder of the

flutter design and arch rosetta repo at Github https://github.com/fredgrott/flutter_design_and_arch_rosetta

Now for the user-interface part of it.

The User Interface Code

This is how to use it:

Even though the width and height are set to doubleMaxFinite you still have to set the background to a color background as on android the transparent bottom system navbar shows as white if you do not use that workaround.

What does it look like?

The Video

Limitations

The controller part is still raw in that we have no app or view state integrated with state management and the animation. This is, however, a future project and article.

Where is the source?

The rive_utilities library is in the internal_packages sub-folder and the app is in the rive_animations

background_animation sub-folders of the flutter design and arch rosetta git repo at:

https://github.com/fredgrott/flutter_design_and_arch_rosetta

Conclusion

If you follow me long enough you will realize that I am creating a series of articles that have all the cookbook recipes to solve all the code and visual design problems in creating a front-end app.

Resources

Resources specific to the article:

flutter design and arch rosetta https://github.com/fredgrott/flutter_design_and_arch_rosetta

General Flutter and Dart resources:

Flutter Community Resources https://flutter.dev/community

Flutter SDK https://flutter.dev/docs/get-started/install

Android Studio IDE https://developer.android.com/studio

MS’s Visual Studio Code https://code.visualstudio.com/

Flutter Docs https://flutter.dev/docs

Dart Docs https://dart.dev/guides

Google Firebase Mobile Device TestLab https://firebase.google.com/docs/test-lab

Trademark Notice

Google LLC owns the following trademarks; Dart, Flutter, Android, Roboto, Noto. Apple Inc owns the trademarks iOS, MacOSX, Swift, and Objective-C. Apple Inc owns trademarks to their fonts of SF Pro, Sf Compact, SF mono, and New York. JetBeans Inc owns the trademarks of JetBeans, IntelliJ, and Kotlin. Oracle Inc owns the Java trademark. Microsoft Inc owns the trademarks of MS Windows OS and Powershell. Gradle is a trademark of Gradle Inc. The Git Project owns the trademark to Git. Linux Foundation owns the trademark to Linux. Smartphone OEM’s own trademarks to their mobile phone product names. To the best of my ability, I follow the brand and usage guidelines with the above-mentioned trademarks.

About Me, Fred Grott

I am on a different adventure of creating a Maker and Creator studio the bootstrap way in teaching Flutter Application Design and Development to you guys and gals.

My keybase profile is at: https://keybase.io/fredgrott