A simple graphic animation using Rive 😍 in Flutter 💕

What's Rive? 🤔

• 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🖤

What about Flare? 👀

• 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.🦾

Intergrate in Flutter ⚙️

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

1. Add this line into your pubspec.yaml

dependencies:
  flare_flutter: ^2.0.5

2. Import it in your lib/main.dart

import 'package:flare_flutter/flare_actor.dart';

3. Make a new folder name assets in the project-level directory.

4. Export your flare file from Rive i.e .flr file, add this file into that assets folder.

5. Update your pubspec.yaml

   Add 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

6. Follow the code written for flare_actor in lib/main.dart file.

7. 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💯.

How it looks! 🥳

Click below to check this animation on Rive and show your love😍

Give life to your design on Rive!💯