Creating a live cursor sharing app with Flutter and Supabase

adding realtime interactions in your app is a great way to enhance your users's experience today in this video we're going to take a look at how you can add live cursor position sharing feature using flutter and subas we'll be taking a look at the custom painters API of flutter as well as superbases broadcast feature let's dive in so I have a blank flutter app here and we're going to start up by creating a blank sa widget we can call a canvas space pass the canvas space to the material app and we are going to replace default placeholder with a blank scaffold now before we dive into the UI stuff let's create our data model we can call a user cursor and it represents a single cursor in the app it has a few properties like Poss or color now we can Define The fromjson Constructor it takes a map of string of dynamic and it'll populate the properties of user cursor object to get the position of the offset we're just going to say that the position is stored within the position argument of the Json and the x coordinate can be accessed with X and then y coordinate can be accessed with Y now on to color and we're going to do something unique here so we're going to create an extension method of the color class called random color up here this extension method is going to have a single static method called get random from ID it will take a single parameter ID and based on the ID it'll return a random color the actual code itself of how I'm generating a unique color from the given ID isn't that important or exciting uh but the important idea here is that we have a random ID for every user and then we are generating a color that matches that ID now let's add the ID property that I forgot about earlier this will be a uyu ID representing a unique ID for each user and now that we have an ID we can generate a random color from the ID and we can also extract the ID from Json and assign it to ID property and now that we are done with the fromjson Constructor we can move on to the two Json method essentially this is just a reverse process of the fromjson method for ID we're just going to pass ID for position it's going to be a map of X of position DX and then y of position Dy and because color property is going to be generated from the ID property we don't need to include it here I'm just going to close the user cursor as we're done with it and now we can Define some states for the canvas page State now we can create a user cursor property here which is going to be type of map of string of user cursor the key of this map will be The UU ID assigned to each user and finally the fun begins we get to play with the custom paint wizard of the custom paint wizard we want to take up the entire size of variable so we're just going to pass the media cr. off. size and then we can also pass a painter parameter we are going to call it canvas painter and we're going to Define it up here so it's going to be class of canvas painter which extends the custom painter it will have a single property called user cursors which matches the state that we had with the canvas pce State let's also add the two override methods that's required by custom painter starting with should repaint in this case every single time the property changes we want to repaint the canvas so we're just going to return true now onto the paint method here we want to basically draw each cursors on the position they are located at we're going to start up by looping through each Cur cursor and getting the position once we have the position we can get started with drawing the path for the second argument pain we're just going to assign the cursor color for the path itself we're going to start out with the path instance and move to the position of the cursors from here we're basically going to draw line a few times to complete the shape of a cursor we'll be calling line two a few times I'm just going to add the position DX and Dy and copy it a few times then I hopped on figma and got the list of coordinates to draw a cursor okay I think our custom painter is ready to go let's go back to our custom paint wi it and pass the user cursor property now at this point we can try to see if we can actually see the cursors being painted on the canvas so let's create a static dummy data here give it a empty string of ID some color and a position we can just say both X and y's are 100 run the app in debug mode and we see a nice cursor showing our app great let's delete this St data now at this point we can get into the actual logic of syncing the cursor positions with other users and for that we're going to be using a few libraries first super splutter for the real time engine and second uu ID just to generate a unique identifier now coming back to the dark code let's add another property here and let's call it my ID this will be my unique ID we also need a realtime Channel instance we can call this canvas Channel we'll be using this canvas Channel instance to interact with subus real time let's initialize these variables within the net State my ID will be av4u ID and then canvas channel is going to be superbase Channel but we haven't initialized superbase yet so let's go up here initialize superbase hit to database. new and create your superbase project then copy and paste your superbase URL and addon key I'm also just going to create a global subas variable right here now the canvas Channel is going to be super base. Channel and we can give it a channel name of canvas and then on broadcast the event name can also be any string we're just going to call that canvas as well and then let's fill in the call back first we are going to construct the user cursor object from the Json payload then we can update the local state passing the cursor. ID is the key and then cursor is the value and then we can wrap all this inside a set State remember to add subscribe at the end and we are ready to listen to other people's cursor positions we can also dispose the super base channel in the dispose method now at this point we can broadcast our cursor positions to other users that are also viewing the app at the same time for that we wrap the entire custom pain widget with a mouse region Mouse region allows us to track where the cursor is within the widget we can extract the cursor position from the onhover Callback and for the color color should be automatically generated from the ID so let's actually modify the Constructor and now that we have modified The Constructor we don't need the color parameter and then we can broadcast this my curs object through sub broadcast payload is going to be cursor and then we are going to pass the Json representation of the mic cursor and that's it now when the user moves their cursors within the region that information is being broadcasted to other users through superbase real time let's see if it works I'm using Google Chrome in Safari here because opening two Chrome Windows had some issues with the mouse region wizet but it looks like it's working great we can make the cursors move smoothly by cranking up the events per second so we can edit the real time options and events per second we can assign it 30 by default it's 10 and refresh the page and see the cursors look a lot smoother now and that's how you can add live cursor position sharing feature in your app working with custom painter is always so much fun isn't it it we'll be adding more features on top of what we worked on today in the coming episodes so that we can build a figma clone if you don't want to miss any of that hit that subscribe button and get notified until then bye

Channel: Supabase

Views: 2,676

Keywords:

Id: QhRNXlFLaeE

Length: 7min 52sec (472 seconds)

Published: Fri Jan 26 2024