Flutter MacOS Setup Tutorial | Configure Flutter SDK on MacOS (Intel & Apple Silicon) M1/M2/M3

in today's video I'm going to be showing you guys how to set up your flutter development environment on Mac OS this tutorial will work for both Intel and apple silicon based machines and besides this not only am I going to be showing you how to set up the flutter SDK but also all of the other supporting tools such as Android studio and xcode that you need to have installed on your system to efficiently develop apps using flutter so the first thing that we're going to be doing is to make our lives easier installing a package manager onto our Mac OS operating system called home Pro links to all of the resources that I mentioned within this video can be found in the description below so all of these websites that I mention within this video links to them will be down below so to install home brew what we're going to be doing is going to a website called brew. sh and then there's going to be a section that says install home R you're going to be copying this command coming back to your terminal which you can open by doing command space and then typing in terminal and then opening it up and pasting in the command ear using command wi and then it's going to ask you for your password you'll type in your password and then press enter and it's going to go ahead and install the home r package manager onto your system so I'll let this continue and once this process is finished then I'll resume the video Welcome Back everybody so now that the home rout package maner installed we can use this to actually install the flutter SDK onto our system and this way it's going to be very easy for us to actually install the flutter SDK and set up the appropriate paths on our system all of the heavy lifting is going to be done by the package manager so to install the actual flutter SDK using home brew we're going to be using a command which is Brew installed D- Cask space flutter so I'll copy this command and then again links to all of these web pages will be done in the description below come back to my terminal and paste it in and press enter and this is going to go ahead download the flutter STK set up the appropriate path variables for me set up my environment correctly and at the end it's going to give me an output saying that flutter was installed correctly so I'll let this go on and then once this is finished I'll resume the video Welcome Back everybody so as you can see that I got an output that says flutter was successfully installed so now to test if our flutter SDK was set up correctly what I'm going to do is firstly type clear in the in the terminal to just clear all of the terminal output and then after this is done I'll typee in the command flutter which we use to actually interact with the flutter SDK using the flutter CLI or command line interface and then I'm going to type in flutter D- version and then this is going to go ahead and actually pull this information and display it to us so as you can see that flutter was successfully installed on our system the flutter version is 3.6.9 and then the actual Dart language installed on our system is 3.2.6 so now that this is done what I'm going to be doing is actually showcasing you guys how we can actually use the flutter CLI to actually debug issues with our flutter environment so we can use a command called flutter space doctor and what this command basically does is that it performs an analysis on our flutter environment and then actually takes a look at if there are certain things that are correct and displays those to us and if there is any problems it tells us those as well so as you can see that it detected that on my system there are some things that are correct such as the flutter SDK being installed the Android tool chain being correctly set up but I don't have Android Studio installed I don't have xcode installed so there are certain things that might be working for you certain things that might not be working for you but if you also have an error with Android tool chain don't worry I'll show you how to fix that as well but most probably you'll see some things like this as well as maybe V code not being installed so how can we fix this well firstly let's fix the vs code side of things so to fix the vs code side of things all you have to do is come to the website called code dovisual studio.com and then download visual studio code for for your operating system and visual studio code is going to be the code editor that we're going to be using to develop our flutter applications once you've installed Visual Studio code all you have to do is open it up so it's going to open something like this and you're going to see a welcome screen and here what we're going to be doing is actually installing all of the necessary extensions we need to install in order to ease our flutter development so to do that what you're going to be doing is going to the extensions tab which you can open up using the sidebar so once you have the extensions tab opened up what you're going to be doing here is actually typing in the name of the extensions that you want to basically install so the first extension that we're going to be installing is going to be the extension for Dart so I'll type in Dart and press enter and this is going to go ahead and pull all of the extensions we can install and we're just going to be installing the first one which is D language support and debugging and you're going to install it and it's from D code.org and what this extension is going to do as the name suggest is add the language support for. two Visual Studio code as well as allows the ability to debug it so once this is done I'm going to remove this and type in flutter and press enter and now you're going to see that it's going to go ahead and give us another list of extensions that we can install and the only two that we're going to be installing the first one is going to be the actual official plugin by do code.org for flutter that will allow us to actually add support for flutter to visual studio code as well as debugging support to it and then the next one that we're going to be installing is going to be flutter widget snippet which is by Alexis Taurus and this extension is not necessary but I use this to actually add useful widget Snippets to my actual code so it makes it really easy for me to maybe create a stateful widget super fast and things like that so you can add this if you want otherwise you don't have to and once this is done that's pretty much all you have to do for visual studio code so you can close this down and that's pretty much all you have to do so now that we have our actual coding environment set up correctly the next thing that we're going to be doing is installing Android Studio so that we can actually develop our flutter apps for Android so to do that you can come to developer . Android studio.com then click on download Android Studio you can accept all of the license agreements and then install it for your appropriate system in this case I am using a Mac which is an apple silicon chip so Mac with apple chip and press enter this is going to go ahead and start downloading so once this is downloaded then I'll resume the video Welcome Back everybody so now that Android Studio has been downloaded I'll open up the DMG file and this is going to open it up and then I'm going to take the Android studio and I'm going to basically drag and drop that into my app applications folder this is going to go ahead and copy the Android Studio ID from the actual DMG file into my applications folder and that's pretty much all we had to do so now that this is done you can come to your applications folder click on Android Studio open it up and this is going to go ahead verify the Android Studio installation for you and then after some time it's going to open that up so that you can actually interact with it we're not going to be using Android studio for anything besides actually setting up our Android sdks and simulators so I'm going to be showing that to you right now how you can do it so once Android Studio starts up the first thing that you're going to be doing is clicking on more actions and then going to the SDK manager within the SDK manager you're going to be selecting the sdks on which you want to develop you need to at least download one SDK so what we're going to be doing is downloading the latest SDK which is Android 14.0 so whichever the latest one is for you just select that and then once this is done then you can go to SDK tools and here you can select the following you have to select the ndk the Android SDK command line tools cmake Android emulator and then Android SDK platform tools and once this is done that's pretty much all you have to do I'd also recommend installing Google Play services and Google Play licensing library but that's totally up to you and once this is done you can do apply okay and this is going to go ahead and install all of the components for you so I'll let this continue I'll let it download all of the components and then I'll resume the video Welcome Back everybody so now that Android Studio is done with installing all of the things that we had mentioned to it you can click on finish and then that's pretty much it just make sure that for the SDK platforms you've installed at least one of the sdks so in this case we're installing API level 34 and on the SDK tool side of things you've downloaded the Android SDK ndk Android SDK command line tools cmake Android emulator so that you can actually spin up emulators on your device um Android SDK platform tools Google Play licensing library and Google Play services press okay and that's pretty much all you had to do so the last thing that we're now going to be doing before we shut down Android Studio is creating an actual simulator that we can actually spin up on our device that has the Android operating system installed on it so to do that you'll click on more actions virtual device manager and then here you can create a virtual device so what I'll do is I will actually delete the existing one that I have which is a pixel 7 and then I will click on the plus button and here what I'm going to do is Select an actual phone what I'm going to be doing is selecting pixel 7 you can select any device that you like I'll just like pixel 7 select next then select the API and this case you'll have to download the other ones since we haven't downloaded those before but if you want to actually spin up an emulator which has upside down cake or API level 34 installed on it you could select that one so that's the SDK we had installed in the previous step click next nothing has to be changed here you can click finish and this is going to go ahead create the emulator for you as you can see it created one here that says pixel 7 API 34 and then to start it you can either start it from here by clicking on this run button or I'm going to be showing you how to actually spin up an emulator using the actual vs code as well so for now that's all we have to do now we have an emulator set up as well so we can close this close Android studio and that's all we had to do so once this is done the next thing that I'm going to be doing is coming back to my actual terminal and as you can see last time when we ran the flutter doctor command we had an issue come up that Android Studio wasn't installed you might have also come up with an issue that Android tool chains weren't set up so now what you can do is type in flutter doctor once again and this time hopefully the Android studio and the Android toolchain errors should be resolved for you and there shouldn't be any issues there so as you can see now it says that flutter is set up correctly Android tool CH set up correctly vs code is set up correctly Android Studio set up correctly and then if you want to develop flutter apps for the actual web then you also have Chrome set up correctly but that's if you have Chrome installed there shouldn't be an issue with this so now now the last thing that we're going to be taking a look at is how we can actually set up xcode so that we can develop flutter applications for Mac OS or iOS so to do that what you can do is do command space open up the app store and once this opens up what you're going to be doing is in the search bar typing in xcode pressing enter and then actually downloading the xcode IDE so just come click on the install button this is going to go ahead and install the xcode SDK for us so I'll let this continue when once this is finished then I'll resume the video Welcome Back everybody so now that xcode is installed what you can do is do command space type in xcode and this is going to go ahead and actually start the xcode ID for you so I'm just going to let xcode start and I'll shut down the actual app store and then let's see what the actual UI presented to us looks like but while this is happening let's do another thing let's do flutter doctor again and this time let's see if we get an error that says that xord installation is incomplete so I hope that now it's going to say that X code is installed as you can see and everything else is set up as well but i' just like to mention quickly that there might be a scenario where it's going to tell you that hey xcode has been installed correctly however now what you need to do is run the following commands so the First Command that you might have to run is pseudo xcode select this one so just copy it by doing by first highlighting it and then doing command C and then opening up a new terminal instance and then pasting it in by doing command V and pressing enter and then you can do the same for the second command like so and then pressing enter and that's pretty much all you had to do so once you've done everything like that and everything has been set up correctly if there are any problems you can just do flutter doctor and most of the times the actual output tells you what the solution to that is so if you don't not have any errors like I do then this means that flutter development environment has been set up correctly on your system we we have flutter setup correctly we have the Android tool chain setup xcode setup Android Studio setup Visual Studio code setup so now what we can do is actually create a demo flutter project and try to run it on our actual simulators and see if it works or not so to do that what I'm going to be doing is clearing first the output from my terminal then I'm going to be doing CD which stands for change directory and then going to my desktop here then what I'm going to be doing is typing in the command flutter create and then the name of my app which in this case would be demoore app and what this is going to do is that it's going to initialize an empty flutter project within the folder that we call this command in and the name for that project will be demo app as you can see it created one for me here so now what I can do is close down the terminal I can exit it I do not need it anymore I will open up visual studio code as a new window like so and then I'll drag and drop this folder in like so I'll also minimize the browser window I'll dog this to one side of the the screen I'll also increase the size of my code window like so and then what I'm going to be doing is going to lip and main. Dot and as you can see since we had previously installed the dot and flutter extensions within Visual Studio code it's already detecting that our project is a flutter project and setting up our actual environment correctly so now to select which Target we want to use to actually deploy our flutter application to for testing or debugging I should say what we can do is use this bottom panel here where it says Hussein's iPhone for now but it might say no device connected or no device selected or no simulator selected anything like that so you can click on it and this is going to create a popup through which you can actually select the devices whether physical or virtual physical ones being the ones that are connected to your actual computer using a cable that you might want to test your flutter application on so what I want to do is test it on that simulator that we had created using Android studio so that was the pixel 7 one so I'll click on it and this is going to go ahead and launch an emulator for me which we had already created in the previous step of Android Studio so as you can see after some time a new instance of an application appears that says Kimu system Arc 64 so this is the actual simulator starting as you can see you can then drag this simulator onto any place on your screen by just using the edges of the simulator clicking and then dragging so I'll dock it to one side I'll let the simulator start and and I'm also going to show you what the actual UI for xcore will look like because now xcore is actually opened so for xcore you don't have to worry about anything the only thing I'll recommend for now is go to window devices and simulators and then go to the simulator section and just make sure you have any simulators here and if you don't you can click on the plus button here and then create a simulator so the process is fairly straightforward so I won't do that since I have a bunch of them and if you have a new installation effect code you should have them as well so close this and now I will debug my application so as you can see I've selected pixel 7 so all I need to do to now debug my application is make sure that I have a dot dot file open in this case that's main do dot I'm going to click on this button here this is going to go ahead and start building my application it'll then build it and deploy it to the actual simulator and then I'll be able to test the actual code changes and debug my application on the actual device so I'll let this continue and let the application build and once it's built then I'll resume the video Welcome Back everybody so as you can see now the application is correctly running on the simulator and now to test that our changes between our code base are hard reloaded onto the actual device what you can do is just come to main. Dot and what we can do is actually come to the team. data I'll close down the terminal and let's just change the color from seed color to be colors do instead of Deep Purple let's do colors. red and if I do command save now the changes will automatically be reflected on the code base through the magic of hot reload which is a very powerful feature of flutter so this pretty much works for us and we can now conclude that it's working correctly on Android for us so I'll quickly shut down the Android simulator so now I'll select another simulator by firstly stopping the debugging then clicking on the simulators name saying that I want to start an iOS simulator now and I'll close down the pixel simulator by just pressing X here and once the iOS simulator actually starts up then we can actually deploy our application onto that so now that the iOS simulator is up I'll do iPhone 15 Pro Max as the target start debugging and now the application should hopefully launch on this as well so as you can see now the actual flutter code is running on an i simulator as well so with that that's pretty much it for today's video I hope that you were able to successfully set up the flutter SDK on your Macos operating system as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 6,395

Keywords: flutter installation in mac os, setup flutter on mac os, how to install and setup flutter on mac os, flutter tutorial for beginners, mac os flutter installation, flutter setup on mac os, install flutter on mac, install flutter on macos, install flutter on macbook m1, install flutter on macbook m2, install flutter on apple silicon, how to install flutter on mac, install flutter with android studio, Hello world using flutter on mac, flutter on mac, set up flutter on mac

Id: Csguwudo5U4

Length: 16min 52sec (1012 seconds)

Published: Fri Feb 09 2024