Setup & Run #FlutterFlow Projects on your Mac! - Full Walkthrough!

okay so what are we going to cover in this particular video then well we are going to want to spin up our flutterflow application on our local device and to make that happen we're going to have to go through a number of steps to get our environment all configured and set up so we're going to need to install some tooling on our machine we're going to need to install the flatter SDK and get that configured and running we're also going to install some additional Apple tooling such as xcode which has the iOS simulator and of course some additional command line tools as well and then we're going to install Visual Studio code as well this is the kind of the the development editor that we're going to use to actually fire up our flutterflow application which ultimately will then run with inside the iOS simulator itself once we've kind of got all of that in place then in a follow-up video we're then going to look at how we actually then can on a more regular basis download our code more conveniently from flutterflow and then just just test locally with inside our local IDE just to make sure everything is running as we expect it to so there's a number of steps involved in this it's not for the faint-hearted of course I'm going to try to make it as clear and as easy as possible to follow along hopefully you'll get the same results as I do at the end of it so without further Ado let's get into the video and let's start installing the flutter SDK [Music] okay so here I am on my desktop I'm going to hold down the apple command key and hit this space and now I'm just going to type in terminal just like that hit enter and you should get something that looks very very similar to this it might not be blue it might be black it could be any sort of different sort of color screen but generally you'll end up with the terminal window and that's what you need to stick to so I'm now just going to paste the command here that we're now going to run so this command is if you are running a apple silicon device so for example an M1 or an M2 it could be an M3 or M4 by the time you're actually watching this particular video but if you're running at a silicon devices this command you need to run if you are running an Intel so a slightly older Mac you don't need to run this particular command so just hit enter and it's going to ask me for my actual password of my machine so just hit that and hit enter and then I just now need to go through this and I'm just going to a type A to agree let's just let it do its thing and it's going to go away and it's going to do some some installation and then that's all that we need to do so that step is now complete and let's move on okay so this next step is really really critical to the success of this particular video and what we need to do is we need to download a version of flutter to our local machine which matches the version of flutter that is running with inside flutterflow itself now if you look at the top left here with inside any project that you load up with inside flutterfly you're going to see here we've got this version number up here flutter three three point ten point four this is the version of the flutter SDK that we now need to go and download now it's likely that when you actually go to the flutter website to download it will be a newer version than what we're running here so we need to make sure that we match up with this particular version so just make a note of that this is 3.10.4 for me at the time of recording of course when you are watching this particular video it could be a different version okay so just make the a note of that now let's now head over to the web and let's now download the right version that we're going to need to get up and running on our machine so I've headed over to the flutter Dev website and I've gone to this particular sort of website URL that you've got up here and this has taken us to the Mac OS install page if you just scroll down here this is the one that you are interested in the get the flatter SDK and as you can see here these are the latest versions of the flutter SDK that you need to download but of course as we've just mentioned we don't want to download these particular versions yet until flutterflow actually supports them okay so what you need to do is you need to move over to the SDK archive so just choose SDK archive now if I just scroll down here you're going to see here we've got a number of archived versions here some earlier versions of the flutter SDK now we need to move down here we need to find the one that we're interested in so we know it's 3.10.4 so as you can see here we've got two options available to us and we've got the the Apple silicon version okay so you're running an apple silicon machine an M1 M2 M3 M4 whatever it will be at the time you need to download this this particular link here or if it's an Intel device that you're running here an Intel Mac then this is the x64 that you're interested in so I'm running a silicon Mac so I'm going to click on 3.10.4 and download that so I'm just going to hit that now and away it goes and it will download to my downloads folder so what we'll do once that's downloaded I'll come back to it and then I'll show you what you need to do next okay so what I've done is I've created a folder on my machine called tools now that sits with inside the name of my account on my machine now yours is going to be different here but what I recommend if you're following along in this particular video please do create a tools folder with inside your home directory which mine is called the digital Pro and then what I've done is I've the download that's literally just come down to my machine I've moved into the tools folder now all I'm going to do now is just literally double click on this now and let this get expanded and it will create a flutter folder with inside this directory so that is almost complete there there it is and of course if I wanted to now of course I could just delete this now which I'm going to do so let's just move this to the bin I'm not interested in that anymore so this is now provided the SDK down on my machine but we're not really anywhere yet we now got to get this now configured and up and running on our machine so let's now go and do that now thank you okay so now that our father SDK is now installed on our machine Let's Now set our terminal to put a reference to where that is actually on our machine so we're going to want to be able to run the flutter commands wherever we would like with inside our terminal whereas in different directories and stuff like that we're going to always want it to be able to find the flutter SDK so we now need to configure a path so I'm just going to right click here and I'm just going to put a a command in here of Nano which is kind of like a little sort of editor that we can use to set our path so just type that particular command in hit enter and we should see that come up there it is so it's going to be pretty empty by default to start off with the we now need to put the path reference in here okay we do that and I'm just going to paste that in again so you can see that there we go so I'll put that in there I've pasted in there now that is the path to my uh the flutter SDK that we installed now hopefully if you've been following on you created that tools folder with the flutter SDK with inside the same kind of path now obviously I say the digital Pro they're yours will be different it's going to be your own name but pretty well much copy that out exactly how that is and that should be good now what we now need to do is we now need to actually save that one size paste in the way that you do that is you just hold down the control key and you just hit o here and then you just hit literally press enter on the keyboard and then that is now now saved to your machine if I now do a control X we can then exit back out and of course we can just go back into Nano so I'll just do an upper Arrow here and it kind of replays the previous command hit enter and you'll see that it's actually saved so it looks like it's all there just do Ctrl X to come out of that and it looks like that's all saved for us so that's Now set up for us let's move on to the next bit okay so I've loaded up the app store on my machine and this is what I'm presented with we now need to download the xcode tool set so just move up to the search here type in the xcode here just type that in there it is it's just come up there and you can see here this is um the icon you're looking for the little Hammer here with the a it's a developer tool so look for that at the moment mine says open yours will probably say get if you haven't already downloaded it I've already downloaded it Please be aware though this download will take probably some time to come down it's quite a large download so just be prepared um depending on the speed of your connection so once it's downloaded we don't need to open it just leave it downloaded and then we'll move on to the next bit okay so now our xcode has downloaded there is a couple of pre-steps that we need to do to configure our environment I'm just going to place the first command in there please follow the same step as well just press enter and then you probably won't get any feedback not that I can recall but you won't get any feedback I don't think but just get that up and running and then I'm going to give you another command that you need to run as well so there we go I just pasted that in there press enter now it's likely on your machine what you'll see is you'll see probably a load of license information come up I think you just keep pressing the space bar until you get right to the bottom and then I think you then need to type agree in there type the word agree in and then hit return and then what will then happen is it will then carry on doing a little bit of installation until it then completes on the command line okay so switch over to my desktop now with the terminal window I've got a brand new command in there of open space a sort of minus a space a simulator so by executing this particular command this will certainly confirm that we've got xcode installed okay so far hit enter and um hopefully you should um successfully see the iOS simulator simulator up and running now if this is the first time you've actually run this it will take a while for the iOS simulator to actually get itself all set up but as you can see there um everything is now up and running for me with a pretty vanilla bog standard iOS simulator setup so let's now move on to the next step right so in this particular step we're going to run a command with inside the flutter SDK to determine if our flutter SDK is actually set up correctly now what happened is I've typed in here flutter doctor if I hit return now then what that'll do is that will run the check on my particular machine and it will determine whether I've actually successfully got everything installed now chances are this if this is the first time you've actually run this so you're going to likely see a number of errors and I'll show you what that looks I've got a little screenshot here on my desktop you will probably see something very very similar to this now of course it might not be a completely the same for you because it's likely you'll see probably you know these Warners probably won't be displayed in but you might likely see this particular error which we're going to resolve in just a moment and you might see a couple of other sort of sort of x's or or whatever against these particular pieces of um of additional dependencies that we haven't actually installed yet now we are going to be installing Visual Studio code very very shortly we're not going to be worrying about Android Studio in this particular video but chances are you might have an error there but it's one that doesn't really concern us at all so pretty well much we're going to focus on resolving this particular error and um then we'll come back and then I'll hopefully I'll show you what it should look more closely like after that so let's now move over and get that one sorted okay so let's get these additional dependence dependencies installed so the next step we're going to do with inside are terminal window is we're going to type in the command Brew now if I hit enter here you'll see that I'll get this come up now if you've got that come up and you've tried to improve them pretty well much you're in a good position okay but if you haven't got that up and you've probably got an error that it can't be found then what I need you to do is head over to a website called brew.sh and I need you to actually copy this particular command here just copy that and then come back over to your terminal and just paste that in there like that and press enter now that I need to put my password in there and I hit enter and what that's going to do is that's going to actually deploy some tooling on my machine which I can then use to then install these additional components on my machine so I'm just going to press enter there it's now going to go away it's going to do its thing it's going to download various uh pieces of tooling from the actual the internet but it's just a package manager um so it's not going to do any harm to your machine at all because you can use to install other types of tooling on your machine but once that's done then you're in a good position and then we can now resolve that dependency issue okay so I've just typed the additional command in there Brew install copods and just press enter and that's now going to go away and it's now going to for you install that on your machine I've already got this installed um but just get that done and then we can then what we can do when you actually then run the flatter space dot to command to press enter on that you'll find that that particular error should have now disappeared from the list of errors that you actually got back okay so next up we need to install Visual Studio code on your machine now just head over to a code.visualstudio.com forward slash download and then on the right hand side here you've got the Mac option here if you click that it's going to download the universal edition of Visual Studio code but of course if you know that you're using an apple silicon or you're using an Intel version of your Mac then you choose the right version for your platform here so once you download that get that actually installed on your machine so just double click on the zip get that installed and then move on to the next step okay so here we go I've got Visual Studio code um up and running on my machine um this is almost a vanilla copy of Visual Studio code I've got a little bit of customization I've got a bit of theming in there and stuff like that but pretty much it's an out of the box version of visual studio so we need to install some extensions so on the left hand side just choose the extensions option here and we need to install one called flutter so just do a little search there and then hit the install option so it says installing and then once that's done we are good so that looks like that's all installed for us there's one thing that we now need to do we're going to want to kind of load up the visual studio code with inside the actual terminal window we want to be able to let it get configured with inside our path now I'm with inside Visual Studio code there's actually a little shortcut that allows to actually get that all set up if you just go up to the search here let's type in a forward angle bracket there and type it in shell and you'll see here the first option is shell command install code command path just choose that and just go through the prompts there that come up I've already actually already got this set up but if you just go through the prompt there you'll find that that will then be configured on our path that means we can then load a visual studio code wherever we are with inside the terminal window so let's now see what a perfect flutter SDK setup looks like so I've just gone back to the terminal window I've typed in flutter doctor hit enter and we're just going to let it do its thing now okay and um it should come back with lots of green ticks which is uh kind of what I would like now of course the key one here is to make sure they're flatter um you've got xcode um of course you've probably got Chrome installed Visual Studio code should be marked as a tick and of course you're probably going to want to have the ticks on the connected device and network resources as well like I said if you have Android that is currently not set up on your machine don't worry about it we don't need to use it here but um and of course Android tool chains as well you may not actually have that set up either so um as long as you've got the green ticks against the ones that we need for this particular video you will be good and of course in future videos I'll also cover the setup of Android Studio as well um using um again another download like xcode and we can get that installed as well but for now that's what we're looking for and then we can now hopefully be in a position where we can now bring down a flutter flow project to our local machine and then we can get that running up with inside the simulator so we're going to do that really really quickly in this particular video and then it'll follow up video we'll then get git set up and we'll get hopefully a little bit more Synergy between what you're doing locally on your machine as well as what you're then doing actually on the flutterflow itself so let's move on to that now so if you're following along in this particular video what I now need you to do is create a folder called a git g-i-t okay and I need you to set that up with inside your documents folder off of your home directory so here you can see the digital Pro document and I've created a folder in here called git just go inside there and it's empty so this is where we're now going to clone a flutter flow project and we're going to now pop it in this particular directory where obviously extract it and then we'll have all the files and then we'll go back into Visual Studio code and get that all set up which can then hopefully run up in the iOS simulator so let's now go over to a flutter flow and let's just clone a project to put to actually download and get set up so I've loaded up one of my previous sample projects from my channel here now what we're going to do is we're actually going to download this now to our local machine as a zip file and then we're going to get this now run up as I previously explained now with inside a flutter flow um just literally go to this particular project here if you're following along of course the link is in the description but here is this particular link here just climb the project and then move up to the right hand side here at the top here you've got this option called developer menu just select that and you'll see we've got a number of different options the one that we're interested in is this one called download code if you just click that and then periodically uh or should I say not periodically but um in a very short amount of time you'll see that um that the zip file will actually be created which will contain all of your project files for this particular application so just do that download that and let's pop that with inside that git folder that we just created okay so the zip file has downloaded I popped it inside this git folder I'm just going to double click on this here that's going to expand it I'm just going to delete the actual zip file we don't need that anymore so that's good we've got the we got the actual directory here and you can see in here this contains all of the assets that we've actually downloaded um as part of our project so that's good we now need to move over to the left hand side now this is where we can now use the power of all of the kind of the paths that we set up and all that kind of stuff let's now type some commands here let's do a CD and I'm going to do a dollar symbol and I'm going to say home I'm going to do forward slash and then we're going to say uh documents like that okay so we're on a home folder and I'm going to say git like that hit enter and I can now type in CD and we're going to type in Q underscore and then just tab there and you'll see it's going to go into the directory of QR Scanner final so I'm just literally in that particular folder just as you'll see in here on the right hand side I'm now going to type in in code dot now this is where hopefully Visual Studio code will now load up if I press enter and you'll see here Bingo that looks like our path has all been correctly set up and I've got some messages that's now appearing actually with inside Visual Studio code now the first thing that we're going to want to do is we're going to want to run one of these here on the bottom here which is called run a pub again if I just hit the Run Pub get that's now going to download all of the dependencies that this flutter flow project needs in order to to kind of fire up so that's pretty good it looks like we're in a good position here um I kind of got no Reds or anything like that you can see here these yellows has just really kind of just sort of saying that actually that we've got some kind of unused kind of uh references of inside our project but some that's good we've got no and nothing's red there so it looks like we're in a good position to actually fire this up now in the iOS simulator so let's move on and do that now okay so within Visual Studio code just move over to the search there to a uh and a forward angle bracket here type in launch and then you see it says flutter launch emulators you just hit enter on that one and it'll come up with a number of options now of course um if you as you can see I've got some Android emulators here but the one I'm interested in is IOS simulator that's one that you should see on yours hit enter and then very very shortly you'll see here on the right hand side that the actual simulator is now loading up which is which is great so that'll just give that a moment to load up there it is it's all loaded so now how do we get our application actually running well we can do that really simply by just going up the top here go to run and just say run we do start debugging or run without debugging or quite simply you can just press F5 and then it will then launch and fire up so it can take a moment to build and then you should see the application run successfully on the right hand side okay so it looks like our application is loading up there it is it's all running successfully with inside the iOS simulator doesn't it look nice and then just some little pointers on the visual studio code here you can see here that we've kind of you can see this is the actual Simulator the device that we've actually got connected here um actually typically if you um actually plug in your mobile phone and you can actually run your flutterflow application with inside your mobile phone as well so you can connect your device up and of course you can then have your device there and you can see the output there and then at the top here you kind of got this little toolbar that's appeared here we can actually reload the the kind of the application we can actually restart it or we do like a hot reload or we can actually stop the application as well so that's it for this particular video in terms of getting everything set up I'm really really hoping that you've managed to succeed through all of these steps and to get you where you need to but the hard graft is now done you don't need to worry about this now if you you've got this all successfully running we're now in a great position now where we can be more uh more in tune with kind of like going into flutter flow and actually making changes with inside flutter flow itself and then we can then bring down our code actually into our local environment we can spin it up here and of course we can then test our application in the actual simulator so watch out for the next video on my channel where actually we'll then start looking at actually um just bringing our application down in a number of different ways actually into our local machine for us then do this on a more frequent basis so that's it hopefully you enjoyed this particular video and please do subscribe to the channel as well if you love kind of all these kind of walkthrough type videos a lot of effort does go into try to make the steps as easy as they possibly can for you to learn from and uh and of course please do like the video as well if you're enjoying this particular content so um until the next video I'll see you soon [Music]

Channel: The Digital Pro's NoCode Academy

Views: 3,897

Keywords: android app development, flutterflow, flutterflow crashcourse, flutterflow marketplace, flutterflow training, flutterflow tutorial, flutterflow tutorial for beginners, flutterflow tutorial playlist, ios app development, learn flutterflow, no code tutorial, nocode tutorial, nocode tutorial for beginners, flutter, setup flutter, setup flutter on mac

Id: bZZVkg1G2f8

Length: 22min 46sec (1366 seconds)

Published: Fri Sep 15 2023