A simple graphic animation using Rive 😍 in Flutter 💕
- A real time interactive design tool that allows you to design, animate and immediately 🤩 integrate your amazing designs to your desired end product.
- It allows designers to make any design, animation, icons, character and so many things. These are real design assests that run in real time in your app or game.🔥
- An Open Source Platform🖤
- 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.🦾
A Tip💡 - Always follow the legit sources for avoiding any issues related to package updates. Refer pub.dev for flare_flutter.
To run this animation in flutter you'll require flare_flutter
- Add this line into your
pubspec.yaml
dependencies:
flare_flutter: ^2.0.5- Import it in your
lib/main.dart
import 'package:flare_flutter/flare_actor.dart';-
Make a new folder name
assetsin theproject-leveldirectory. -
Export your flare file from Rive i.e
.flrfile, add this file into thatassetsfolder. -
Update your
pubspec.yamlAdd this line into your pubspec.yaml file(don't forget to change the file name as your flare file, make sure your indentation is proper.)
assets: - assets/Hamilton.flr
-
Follow the code written for
flare_actorinlib/main.dartfile. -
And it's done!👏 You have your realtime graphic animation working in your flutter app🥳. Also it is open to fork on RIVE so that you can use it as your starting point for the animation💯.
