Get started with FlutterFlow and Cursor AI - Beginners Guide

now cursor is a new AI code editor and you've probably heard about it and it is really useful to help you at a point in your flutter flow development where you need some custom code or some custom functionality and it's either not possible to build in flutter flow ORS to time consuming now today I will show you how I connect cursor and flutter flow through GitHub for a new project and then I will show you a little bit about how to use cursor for flutter flow development and show you a couple of tips and tricks

to get you started now we will just start by creating a new flutter flip project uh just create a blank project call it cursor setup cursor video and uh create blank I will not set the Firebase for now as it's not required and the first thing we want to do is we want to connect uh flutter flow and GitHub if you don't know what GitHub is GitHub uh is a place where you save your code and where you can pull copies of your code on which you work um independently from your production code and it

just makes development much easier so why do we use GitHub well you could just download the code and play with it but um because you will be using cursor throughout your project it's much easier to have a proper setup at the beginning and then whenever you want to uh fiddle around with cursor to get C some custom functionality you can easily get down the most recent version of flutter flow okay um to set up GitHub uh what we want to do is we come here and um we go down to GitHub and you want to

you know get the URL of your Repository um in order to do so we go to GitHub and uh you know just go out to the base and uh create a new repository we will just call cursor video and I'll I'll you know keep it really simple here I will link in the video a uh a link to the documentary from flutter flow that talks a bit more about how you can set this up but this is a really simple process so basically give it a name make it private and add readme file because this

will set up Main's default branch and now you create the repository okay next step is we want to get the uh flut Flow app for uh this repository um and as I do this I just uh will show you the documentation um in here because it's also got the link you can read through all this this is really well made um press flutter flow good top and configure or install if you haven't done so and choose the repository you want it for uh I want it for curer video and I will save it and now

everything is set up you go back to um your flutter flow repository and all you need to do now is copy the URL go back to flutter flow paste the URL and Associate the Repository sign in with GitHub and there you go that's is your your you know you're you're Associated and now you want to push your first you know your project to uh GitHub and just call this first commit and what this does is it doesn't push it to the main branch it push pushes it to the to a specific flutter flow branch that

is why we created the uh flut flow uh app or added it to our repository this will take a bit of time once you've pushed it and you can verify this by going to your GitHub and uh pressing refresh you will see this new flutter flow branch and what we will do now is we will create a develop Branch because flutter flow will overwrite our code every single time we push from our repository and and uh we just want to have a branch on which we can work if you want to know more about this

read through the documentation this is a simple best practice now press branches say new branch and you want to pull this from flutter flow and call this develop and you create a new branch and here we go now everything is set up and we can get started with cursor okay now open a cursor and when you open cursor uh the first thing you want to do is you want to create a folder in which you want to keep the project um I'm going to call it cursor video okay and you open it and now you're

inside the folder now this is cursor if you know Visual Studio code this will look really normal to you curs is good uh AI functionality obviously and the way you can access it is if you can you know use this and uh toggle this AI p and you can talk to your code um and you can use different uh AI models and you can mention all sorts of stuff um you can CH mention files folders the web a lot so um this is for talking to your code um there's also if you press command I

you get the composer this is probably the most powerful feature within um cursor because this will actually write files create files create folders uh this will will you know blow your mind if you play around with it and the difference between chat and composer is composer will actually you know do everything and with chat it will suggest things and then you can apply stuff and lastly the uh terminal is also got uh AI functionality so we want to get our uh you know repository onto this local machine and the way we can do this is

um we will go to GitHub and all we need is uh we need uh you know we go into the branch and we need the URL you can find here this is the GitHub URL that we'll use and now let me just show you one cool trick you can do so if you press command K as it says down here you can tell it what to do say I've got a repos repo at you know the link and I want to use it on this machine and initialize kit now this automatically you know creates clones

the repository it goes into right directory and it initializes skit so press command enter and there you go even if you don't know terminal commands you this will get you started really easily and as you can see all we've got now is we've got read me because this is all we've got in inside our uh main branch but we want to go to the developed Branch now again you could uh uh use uh just the terminal or you could say I want to check out the develop branch and it will simply give you what you

need obviously this is a very simple one but uh there you go now you can see we've actually got our develop branch and we've got all the files that we have in our flutter flow project um to demonstrate how easily you can use cursor I just want to do a little test and what I want to do is um say I want to create a calendar widget and I want to have aiz monthly view on which you can you know pick the single dates and uh select date range to do this I will set up

or I would set up a grid and I need you know the day of every month and um to get those days especially get those days um that are in the week uh of the first day of the month and the last uh day of the month uh you would write a bit of code um but I want to use curser to give me that code um now where do we where do we put this code um given that we don't really have any we don't have anything in here yet no custom actions and no

custom functions or widgets um we want to know where flutter FL put them and we can do so by simply creating them in flutter flow and then pulling this code so you go to flutter flow and to set this up we just create some stuff so let's say we create a function and we call it um new custom function and uh we can only sa this if we have something in this function otherwise if you press save says it's empty so we need this to save it in order to show us show us where flutter

flow puts stuff in the code so we can simply say return hello world that's it press save function and there we go there's our function now you can also add a custom action you need to go into you need to create the boiler plate code and now you PR can press save and now you've got your custom action okay now how do we get this into cursor um that's very simple as always we say push to repository we say new function and action and we press push and now it'll take a couple of seconds okay

now this is pushed to GitHub and the process is always the same you go to your flut flow branch and you see this is new commit so it added something the custom function action in the library and what you want to do now is you open a pull request and we pull pull it from flutter flow into the develop Branch so press create pull request it'll check whether it can merge it will be able to merge so merge pull request and confirm the merge and now if you go into your code and you go into

the develop Branch you can see you've also got the new function and action in there and uh now all we need to do is we need to update it in in cursor and uh the way you can do this is um you can simply say get the new version from GitHub and it'll tell you gitp origin develop and you can run this and it gets all the new files and as you can see we've now got a custom folder a custom code folder for actions and the custom functions are in flutter flow and there is

our new custom function um if it says packages are missing well obviously you want to get them but uh the next thing is what we want to do is we want to write the custom calendar widget code we need okay so now we're going to do this live and hope it works um what we can do is we can simply select this and then we can say uh chat let's let's do the chat thing and you can see it's it's got the custom function start file and the lines and I can say um to build

a monthly calendar view I need all the days of a month as a date time list I also need those days of the previous month if they are in the same week as the first or the last of the month now I specified uh what I want to get out as a return daytime list um and I think should do it let's just see what happens and now this gives you all the code and explains you what's happening um what you can do now is you can simply press apply and um let's make this a

little smaller and it it puts this in there uh and yes we want to accept it I just want to show you how you can test it in in in flutter flow first and um what you can do is we want to you want to take the name of the function okay you want to copy and paste your function name you want to go into your into your function yes let's disc call it this into your function over here and let's rename it and uh it it gets a data time as input uh datetime list

as return and as input it gets let's call it month actually let's check out what what's given date time month yeah it gets month which is a date time and it returns a list of date time now it's not nullable and it's a single um you know day time we get in there so you can compare this to this this should be the same so list date time get month calendar dates string month and we've got a DAT time over here so this is obviously a date time and not a string and there we go

that's set up and now what you want to do is you can simply you know pull the code you've got here and you can remove this um let's press save and what we can do now is we can test the function and let's just see what happens if it's started correctly so we put in a datetime and we get back a uh yeah a range of dates and what we want to see is oh yeah over here we' can see 5th of October what we want to see it is if it matches our calendar Sunday

the 1st of September is the first day of uh of the month and this would be a Sunday so this is the first day if you are American if you are European obviously that's a problem because we normally start days with Monday um but you could change this in cursor so this is just to show it but it's given me the whole uh date list time I need and the last day is also a Saturday which is the 5th so I've now got all the days I need to set up a grid for a custom

date range picker if you want to see how you can build this in flo later on I'm more than happy to make a video about this so just comment below okay so as we can see our function codes worked so in no time at all we got a functioning uh function out of cursor want to give you a couple of things you that that will help you inside of cursor and um you can give cursor certain rules so um and you can use cursor to actually get better at code and understand what you're doing um

so if you open your settings you can put those in and I already put them in um which is why I got a lot of output you could say I am a beginner developer I want you to be my coding mentor and explain to me the concepts and how they are important the goal is to maximize the speed in which I become a best developer um this is this works globally and you can change this and say whatever you want I've also got a Twitter post in which I've uh which I'll link Down Below in

which I've got some other stuff you can put in here but you can also um get uh more rules uh by actually even asking cursor it's s um you could say uh you know let's create a new file let's say I am developing a flutter Flow app and I need and I am a beginner at coding but want to use U IE cursor what would be applicable rules and now you can see it gives you some stuff uh when you're interact with an explain fluted do concept provide code examples you know you can use this

AI to just get started and give rules to you lastly the uh thing that is happening currently Is That flotter Flow updated uh to version 5.0 and it will soon feature a push and pull synchronization so you don't need to go through the copy and pasting process anymore but until that is available um I thought I'd put the video up anyways and I will create another video as soon as that features out showing you how you can be even faster at building with cursor and flutter flow I hope you lik the video uh leave comments

below let me know how you use cursor if you use cursor or if you've got any other approach to the whole matter um yeah see you in the next video