How To Set Up Flutter To Test Your App On Mac

in this video i want to show you how to run your flutter flow projects locally to test them locally on your machine now why would you want to do that right because you can come over here and you can preview it or you can test them right here well running it locally might be a faster option to iterate on your design also testing locally will give you much faster debugging because you'll get more debugging info which can help you more quickly identify and correct errors in your project also you can test features locally you can't test in flutter flow some features don't work in web builds like google sign-in or stripe so you should always test on a device before deploying and finally testing locally allows you to test native features like face id and geolocation and in general it's always best to run local and test before you deploy your app okay so there's gonna be three steps first we're gonna set up github second flutter and third xcode okay so first let's set up github now if you already have a github account you can just skip forward a little bit but let's set up a new github account gonna sign up of course pick your galaxy and we're ready okay great next let's download github desktop you don't have to do this but i think it's the easiest way to manage your github projects so you can just download it here i've already got it downloaded so i don't have to okay great let's go back to our github account and let's make a new project we have to make a new repo for flutter flow to push the code into so just come over here to the drop down and we're going to do a new repository and our repo name you just see here i've got this project this dummy project here i've got firebase set up with just some colors we're going to be referencing and so we're just going to call this data you want it to be a private repo and make sure in order to initialize the project that you add a readme file you won't be able to push code to the repo unless you have an initialized repo and go ahead and create the repository okay great the last thing we need to do in github is to install the flutter flow app so if you come over to your project and into your settings and scroll down to integrations and github you can see you'll have to install the flutterflow github app and that's precisely what we'll do we want to install it and normally you wanna only on select repositories and we can select that one we just made that'll be great and install and it should just take a second there we go so github is all set up now let's hook up flutter flow our app to that repo so we're going to need the full repository url so let's come over to that project and when you're in the the main if you just click on there or if you go to here you can just click on repo and click on there and this is going to be that full url so just grab that url put it in here associate the repo awesome we're associated and now we can push our code to the repo so this is what you'll want to do anytime you've made enough changes that you want to test it so let's just push it right now so you push it and then we're going to have a commit message and we're just going to say hey first commit and push it this happens really fast okay so let's just confirm that we have our code here so let's just refresh and make sure this doesn't trick you up if you pull down there's going to be two branches here we've got this main branch that we just made on initialization but flutterflow is going to push it to this flutter flow branch and then we can see our project in here okay awesome so now we've got the first half of setting up our flutter flow project for a local run done that is to say we've hooked up github to flutterflow so now we can just push our code to github okay great now let's do all the stuff we need to do on our machine okay so let's open our github desktop you're going to want to sign into that account that you just made i already had mine open here so i just got to sign into that account okay so i'm signed in and you can see my repositories right here i want to clone it yep that all sounds good and let's fetch our origin not from the main branch from the flutter flow awesome and if you want to see it in your finder you can just open it up here and there is your project okay sweet so now we've got our code coming from flutterflow to github to our computer we're very close now the last thing we need to do is we need to set up flutter on your system so go over to flutter.dev and we want to get started and then you can choose our machine so i'm going to mac here and and we're going to be having other videos for windows if you're on them so you're on mac okay great now for these last two steps installing flutter and xcode these are going to be large files so sort of plan for downloading these and then just kind of walking away from your system for maybe an hour so flutter itself is 2.8 gigs now flutter uses git for installation so make sure you have that installed if you don't it comes with xcode so once we install xcode you'll have get along with it now if you're on an apple silicon mac that's like an m1 or an m2 chip you're gonna have to run this in your terminal now if you're not sure you can just come up to the apple on top left look at about this mac and you can see what chip you have here apple m1 so that means we're on apple silicon so i have to run this command in order to properly install flutter on my system so i'm just going to use spotlight command spacebar terminal let's make it a little bigger so you can see and if we just copy this command copy paste it in the the copy is not set up on the website so you're going to actually copy this dollar sign in which you don't want so make sure you just delete that and enter that you're doing sudo command so you're going to have to put in your password awesome we've installed rosetta 2. next you want to download flutter and once again choose what ship you have m1m2 this is apple silicon everything else intel next you want to choose where you want your flutter to live that's the flutter framework where do you want those files to live so in this example they're saying hey um we are going to have a folder called development where it's going to live so you can just change directory cd into your development folder and go here but of course this could be anywhere where you want and then in the command line you're going to run this command unzip this and that's what you just downloaded so you're going to unzip that once you're in wherever you want lastly you want to make sure to add flutter to your path variable now if you're not aware of this the path variable is an environment variable in your shell that tells your shell where to look for different commands so you can see your path variable if you just say echo path and you can see all the paths currently in your path variable and each one of after one of these colons is a new path so you can see here and see i already have the flutter command installed on here so in order to add that to your path and what this does is it's is it make sure that you can actually run flutter commands so once we're all ready when we're ready to test it locally we're gonna run flutter run and the way it knows what flutter is is by looking in the path variable so in order to add that you just need to run this code right here that adds that to the path variable now i would recommend that you add it globally because this is just adding it to your one terminal window you have open so once you close this shell right here that path is going to be gone so it's better to add it to your persistent global path so to permanently add flutter to the path see update your path and let's just go through this real quick because it can be a little bit confusing so you can update your path variable for the current session as a command line as shown in the get the flutter sdk that's what we were just reading you probably want to update this variable permanently so you can run flutter commands in any terminal session that's what we were just talking about now the steps for modifying this is permanently is different for each different machine but they're fairly similar so first determine the path of the clone of the flutter sdk that is where did we just put it so up here in the example we dumped it into this development folder so wherever you put that make sure you have a reference to that path because we're going to need it next we're going to edit our rc file and this will depend on what shell you're using i'm using z shell so this is what we're going to be editing right here okay so let's add this path so go over to your shell and we want a nano into our z shrc or whatever your shell is okay so here's our current paths available so this is just each one of these is an array just these are different paths that it already has and so you want to come in and i'm going to come down here and i'm just going to paste in my path on my system and we want to just close these we want to grab this right here because this is that's what we just pasted in so i'm just going to grab this right here and go to the beginning and then grab the end of this and that's it so we're just going to exit ctrl x yes we want to save it that's great next you're going to want to run the flutter doctor command this will help you to see if you set set up everything right and it'll tell you if there are any dependencies that you need to add so just copy that and run the letter doctor great and so here we've got one issue it doesn't matter for what we're doing right now but we've got flutter up and running in our global path so even if we close our shell and open it up again we should have flutter doctor we still have access to it okay awesome so we've got flutter set up right now last thing is we need to grab xcode and you can just google search for xcode properly xcode and come in here and you can install it either through the website or on the mac app store it's a huge file it's like 12 gigs so it'll take a little while okay so this is exciting we are all ready to go so all we need to do now is open up a terminal window where our flutter project is so let's just change directories back into our flutter project because we are ready to go here so we're gonna cd into let's take a look at this project yep and we got our project right here so we're finally here this is exciting and to run your project you can just do flutter run now if i do it right now it's going to default to running my project in chrome and if you're designing a web app great you can go ahead and do this but we want to actually test out on a mobile emulator so we just want to open a simulator which will be installed with xcode so let's just look for a simulator and i got an iphone 8 here you can choose whatever device you want and now we're ready to go so remember you have to be in the folder where this flutter project is and we can flutter run and boom we've got our project right here okay that's awesome but really the reason we're doing this is so that we can design faster so let's make a change push it to github and see how fast we can see our changes so we're going to go back to our we got a little typo right here colors so let's just go back here and let's just change that text to colors with one ass and then come over push that to so we fixed s's and let's push that so that's pushed so then we come over to our github desktop fetch from origin and sometimes it'll take a few more seconds so we can just look here and then the last thing we need to do is come over and hot reload it so r and let's look back at our project not yet let's pull it one more time and there it is just like that we're able to iterate on our design with firebase setup locally this will really help you to design faster let us know if you've got any questions in the comments and we'll see in the next video

Channel: FlutterFlow

Views: 11,488

Keywords:

Id: CTf5Egd7-xI

Length: 14min 37sec (877 seconds)

Published: Thu Aug 11 2022