Add live cursor sharing using Flutter and Supabase | Flutter Figma Clone #1

This is how you build and deploy live shared cursor positions in your app with Flutter and Supabase in 8 minutes.
Adding real-time features to your app is a great way to enhance your app’s user experience. One way to wow the user is to add a live cursor feature like Figma. In this video, we go through how you can create a live cursor app using Flutter and Supabase using CustomPainter and Realtime Broadcast.
This video is part 1 of creating a Figma Clone with Flutter series. Watch part 2 - creating a Figma Clone app HERE: • Draw and sync canvas i...
LINKS YOU NEED:
- Supabase Realtime Broacast guide → supabase.com/docs/guides/real...
- Create a Figma Clone app with Flutter article → supabase.com/blog/flutter-fig...
Enhance your app's user experience by adding live cursor position sharing with Flutter and Supabase. This video tutorial delves into using Flutter's Custom Painters API and Supabase's Broadcast feature to create engaging real-time interactions that will help create a much better user experience for your app users - you've built an app, so let’s make it fun to use! In this guide, we’ll show you why this feature is AWESOME for developers eager to introduce collaborative elements into their apps. Our guide covers everything from initializing your project with Supabase to drawing on the canvas with dynamic visuals in Flutter - we go through everything step by step!
What you'll learn:
✅ Flutter's Custom Painters API: Understand how to use Flutter's Custom Painters API to draw on your app's canvas, adding dynamic and engaging visuals.
✅ Real-Time Collaboration with Supabase: Discover how to leverage Supabase's Broadcast feature to share live cursor positions, which definitely encourages real-time user collaboration.
✅ Crafting a Responsive Canvas: Learn the steps to create a responsive canvas in your Flutter app.
✅ Setting Up Supabase in Your Project: Get insights on integrating Supabase into your Flutter project for backend services, ensuring seamless real-time communication.
After watching this video, you'll be able to:
✅ Build Collaborative Features In Your App Powered by Supabase: Implement live cursor sharing in your Flutter applications.
✅ Make your app more dynamic and enjoyable for users to work with.
Chapters:
0:00 What you’ll learn
0:20 Blank scaffolding and data model
1:05 Set colour
1:38 Add ID property
2:20 Define states
3:10 Override methods
4:03 Pass UserCursor property and test the cursor
4:30 Syncing cursor positions with other users
4:53 Real-time channel instance & initialising Supabase
6:06 Broadcast cursor positions to other users using Supabase Broadcast
6:50 Results and test example
7:10 Events per second for smoother cursor movements
💻 Videos to watch next:
▶ Build a SaaS with Supabase in minutes: • Fastest way to build a...
▶Watch all Supabase Flutter tutorials: • Getting Started with F...
▶ Google sign-in on Flutter with Supabase on iOS, Android and the Web: • How to implement Googl...
▶ Supabase real-time with Flutter: • Listening to real-time...
👇 Learn more about Supabase 👇
🕸 Website: supabase.com/?...
🏁 Get started: app.supabase.com/?...
📄 Docs: supabase.com/docs?...
🔔 Subscribe for more tutorials and feature updates from Supabase: / @supabase
📱 Connect with Us:
🐙 Github: www.github.com/supabase
💬 Discord: www.discord.supabase.com/
🐦 Twitter: / supabase
📸 Instagram (follow for memes): / supabasecom
ABOUT SUPABASE:
Supabase is the open source Firebase alternative. Supabase provides a full Postgres database for every project with pgvector, backups, realtime, and more. Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.
Build in a weekend, scale to millions.
#Supabase #AppDevelopment #RealtimeApps #DeveloperTools

[@Supabase]

What other examples would you like to see the DevRel team of Supabase build? Let us know in the comments 👇

[@RandalLSchwartz]

Everytime I look at supabase, y'all have added cooler neat features.

[@conceptcoder]

Waw... Mr Randall look at Supabase.... It's really great then....

[@MrAmG17]

Very good showcase :)

[@hikionori]

It's awesome
It turns out that similar functionality works in Figma as well

[@dshukertjr]

In the next video, we will be building on top of what we created in this video to create a simple Figma clone!

[@GJJ2019]

My love for supabase is increasing day by day ❤

[@theseangle]

For it to to be smoother you could use interpolation. Make the cursor go the new position slowly

[@tylershukert3621]

Great suggestion! Would work on adding it if during my spare time, but it probably will require a lot of refactoring.

[@allanandliftedhands2669]

It would be great if we could also see some native android supabase tutorial

[@dshukertjr]

More native Android content coming!

[@chaozhang3943]

Hi, can pls share ideas about how to make it if want to have a video chat

[@Supabase]

Hi there, if you are seeking help to build something with Supabase, our discord is a great place to get help. You can join it here: discord.supabase.com

[@mabdurrafeyahmed9256]

Please add NoSQL database in supabase

[@dshukertjr]

You can add a jsonb type column, which you can store any JSON objects. It's pretty much NoSQL!