Master Rive and Flutter: Runtime-Controllable Wheel Spinner Guide

Master Rive and Flutter: Runtime-Controllable Wheel Spinner GuideMaster Rive and Flutter: Runtime-Controllable Wheel Spinner Guide

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Pascal Ferrère

pro

• 1d

👋 I built a fully runtime-controllable Wheel Spinner using @Rive + Flutter, and wrote up everything: the architecture, the ViewModel system, the artboard-based illustration slots, and how theme switching works. If you're building apps with gamification, or just want to see Rive's most advanced features in action, give it a read 👇🙂

Check it out

Flutter Rive design

a link to the video instead.

Rive & Flutter Wheel Spinner Development

Flutter

Rive

Rive Animation

UI Design

Gamification

Olena Tieriekhova

pro

• Apr 7

Interactive Breathing Animation System Built in Rive I'd like to share a project I worked on a while ago.

The visuals are simple, but the most interesting part was building a flexible animation system in Rive. I set up logic, states, and interactions. This allows the animation to adapt to different use cases. And at the same time, it stays lightweight and easy to integrate. All parameters are controlled by developers: from timing to breathing method. This makes it easy to adapt to different types of exercises.

Key features: • Multi-language support • Breathing method selection (nose or mouth) • Adjustable timing for each phase (inhalation, holding, exhalation, resting) • One animation system for all exercise types (relaxation, focus, energy, etc.)

Built before data binding was introduced in Rive 😂

Try it out: https://rive.app/s/qSSq8Fnsz0GfXhHoslnoyw/embed 1. Select your language. 2. Adjust the timing and breathing method. 3. Start the session. 4. Press Finish to end the session after the current cycle. 5. Tap New Session to restart. All parameters can be updated in real time.

Completed work

Rive Animation motiongraphics

Aymeric DELPEUCH

• Apr 7

Hold to connect the energy ✨ — Rive interaction for tarot app

Rive Animation app Product Design UI Design Figma

Akinkunmi Ayo

• Apr 7

nice work

Rive

• Apr 7

Join us live as we announce the winners of the Vehicle HMI with Rive Challenge on Friday, April 10th at 11am EDT!

Thank you to all the participants for the amazing submissions.

RSVP here!

vehiclehmiwithrive Rive

luma.com

Vehicle HMI With Rive: Winners Announcement · Luma

Thanks so much for joining the Vehicle HMI With Rive Challenge, powered by Contra. Join this exciting live event where the judges will be announcing all the…