Hey guys, in this video I'm going to show you how you can install and set up Flutter on your Mac operating system. I'm going to show you how you can create your Flutter app in Android Studio and I'm also going to show you how you can run your Flutter app in Virtual Android Emulator and Virtual iOS Emulator. So let's get started and let's see how we can do it. So first of all open your favorite browser and search for Flutter. Install flutter and the first link which will appear here will be from docs dot flutter dot dev forward slash Get started forward slash install So I'm going to click on this link if you land to the home page of flutter click on get started and you will land on this page here you can choose Mac OS and Then you have few options, so if you want to develop an iOS app using flutter you can choose this option And if you want to create an Android app with Flutter, you can choose this option.
I'm going to show you both the ways. So let's start with the iOS option here. So I'm going to click on iOS here. And then you have the getting started documentation for Mac OS. So here you can see all these hardware requirements and software requirements.
And when I scroll down, What I need here for my Flutter iOS development is this tool, which is called Xcode. We are going to see how we can install Xcode in a moment, but let's scroll down a little and let's see what else we need. So in order to develop our Flutter app, we can use Visual Studio Code, Android Studio, or IntelliJ IDEA. In this video, I'm going to show you a demo of Android Studio. So we are going to also download the Android Studio.
And then when I scroll down a little, I can also see Install Flutter SDK. So you can install Flutter SDK using Visual Studio Code, and you can install the Flutter SDK zip file, which is a standalone zip file. So we are going to choose this option which says download and install and we are not going to choose this vs code to install Right, so just click on download and install Here, so let's start with the sdk installation So when you click on download and install Under flutter sdk you have two options here First one is for intel processors and other one is for apple silicon chips for example m1 m2 or m3 chip i have a macbook with support apple silicon so i'm going to click on this option and once you click on this option this zip file is going to download so it's around 1.1 gigabyte file so just wait for few seconds until this file is downloaded and once this zip file is downloaded you can see it will look like this Now, when you scroll down a little in this documentation, it recommends us to create this development folder under your home directory.
And then it recommends us that we extract our Flutter zip file in this development folder. So first of all, we are going to open our terminal. And once you open the terminal, as you can see, it recommends us to create this development folder. Under your home directory.
So when you open your terminal you are directly in your home directory and when you write PWD here the home directly Path looks like this forward slash users forward slash your username right under this We need to create the development folder to create the development folder Just write MKDIR and then development and then press enter And then you will be able to see this development folder under your home directory. So you can see that this development folder is created. So just copy this command, but we need to change this command a little.
I'm going to copy this command and paste it here. Let me just maximize this terminal. And here, we need to make a few changes. So because our Flutter zip file is located in the downloads folder and not in the development folder So instead of this what we need to do is we need to just write tilde forward slash downloads power slash the name of your flutter file right so if you write flutter and then press tab on your keyboard it's going to auto complete your file name right so the command in our case is this unzip forward slash tilde forward slash downloads forward slash flutter mac os and whatever the version of flutter you have downloaded so this you might change in your case. And that's why I'm saying that you can use the auto-complete feature of your Mac terminal.
So I'm going to just press Enter here, and you can see it's unzipping this zip file. Once this zip file is unzipped in the development folder, let me clear the terminal and let's CD into our development folder. And here, when you do L-S, you will be able to see this flutter folder here so when you just go to your macbook's desktop you can see this go option here just click on home folder which is going to open your home folder in your home folder you will be able to see this development folder and then under development you have this flutter folder and under flutter you have all these files in the next step we need to add the flutter path to our environment variables So if you are using newer versions of Mac, it supports ZSH on your terminal. So what you need to do is you just need to add this Flutter bin path in your ZSH end file, or you can also do the same in your ZSH RC file. So if you already have ZSH RC file, then you can add this path to zshrc file also so in my case zshrc file is already present so let me just write cd here so i'm in my home folder and when i write ls space hyphen al you will be able to see that i have this zshrc file right so you can add this path into you the zshrc file also if you don't have the zshenv file if you don't have zshenv or zshrc file just create this zshenv file and then just paste this path there in my case i'm going to open the zshrc file so i'm going to just write open then dot zsh ZSHRC here and then press enter which is going to open my ZSHRC which already contains some other exports.
I'm going to just add this new export at the bottom of this file which is export path is equal to home forward slash development forward slash flutter forward slash bin colon dollar path. As you might already remember that you can see this path here, right? So this is our home folder, and then forward slash development, and our Flutter directory resides in the development folder, and we are going to put this path into our ZSHRC, which is the bin path.
Inside this bin path, there is this Flutter binary, which we are going to use once this environment variable is set. So once you have added this path, just save your file by pressing Command S and then close your file. So once you saved your file, just close your terminal. So just close your terminal, then open a new instance of your terminal. And once the terminal is open, you can run the flutter command.
So I'm going to just write flutter here and then space hyphen hyphen version and then press enter. and it's going to show me the version of Flutter I have. So you can see it has shown me this kind of welcome to Flutter text here, and it's going to also show me the Flutter version which I have installed. Once you see this kind of output, when you give Flutter version command, that means we have set the right environment variable for our Flutter binary. Now...
Once we have Flutter installed, then let's move to the next steps. So I'm going to scroll up a little and we are going to... Install the Xcode. So first of all, you need to open the App Store.
You can find the App Store icon on the dock This is the App Store icon So just click on that or you can also search for App Store in your launchpad and then click on that and App Store will start from here Just search for Xcode and then press Enter which is going to search for Xcode and the result which we are looking for is this one which is called Xcode Developer Tools. Here I'm going to click on this download button. So in my case it shows this warning which says download the older version of Xcode. The current version requires macOS 13.5 or later but you can download the last compatible version.
Because right now if I click on the Apple logo and then click on about this Mac I have the 13 version not the 13.5 so I can Download the older version if you have the latest version of Mac OS You can download the latest version of Compatible Xcode here. I'm going to click on download button. It is going to start the download of the Xcode So you can see This download has been started. It's around 7 GB of download so it will take some time for the download to complete.
You can also go to the launch pad and see the download process. Here you can see this download is going on. So it's going to download around seven GB of data. So it'll take some time. So just wait for the download to finish.
So once the download is complete, it's going to start the installation process. As you can see, when I hover over this circle, installation process is. about two percent complete so now the xcode is installed on my mac operating system once it's installed you will be able to see open button in front of xcode also in the launchpad you will be able to see this xcode icon so i'm going to click on this xcode icon let me minimize this app store and then it's going to start the xcode so for the first time when xcode starts on your mac operating system it's going to ask to agree with the license terms and conditions. So if you want you can read these license terms and conditions and then click on agree and then give your MacBook's password which you use to log into your Mac operating system and then press ok.
And then you will be able to see this kind of window which says select the platforms which you would like to develop for. For now I want to use it for macOS and iOS development. Later, I can also install the toolkit for watchOS or tvOS, but for now I don't want that.
So I will just leave it as default and then click on install, which is going to start the installation of additional components. And you can see the progress bar of the installation. So at this point, I just need to wait for this progress bar to reach to the 100% mark. And once that's done, Xcode is going to launch in a few seconds. So you can see Xcode has been started.
First of all, it says what's new in Xcode, Xcode Cloud, SwiftUI, and it's going to give you the list of all the features. I can click on Continue here, and now Xcode has been started. Once you have Xcode, let's also install Android Studio. So first of all, open your favorite browser and search for Android Studio, and the first thing which will appear here will be... from developer.android.com we are going to click on this link and when this web page opens you will be able to see straight away this download button on this web page so we are going to click on this download button which is going to show you this kind of terms and conditions page you can read about these terms and conditions here and then scroll down at the very bottom where you need to agree with these terms and conditions so if you agree just check this check box and then you will see two buttons here so if you are using the macbook or mac operating system with intel chip then you can click on this button if you are using the mac operating system with the apple chip for example m1 m2 m3 or any other apple chip then click on this button so i have a macbook with an apple chip so i'm going to click on this apple chip button here which is going to start the download of this dmg file so you can see at the time of making this video this file is around 1.1 gigabyte files which is going to take some time to download so just wait for the download to complete here so once this dmg file is downloaded i'm going to click on this dmg file and then i'm going to minimize this browser so as you can see on this window the installation process is really simple you just need to drag this android studio icon into your applications folder so if you are using your macbook and its trackpad you just need to press command key on your keyboard and then select android studio and then drag and drop this icon on your applications folder which is going to copy android studio into your applications folder you can see this copying is done now once the copying is done the android studio is installed on our mac operating system and then you can click on the launch pad and then search for android studio here so i'm going to just search for android studio you can see this icon is available here so i'm going to click on this android studio icon which is going to start the android studio on our mac operating system so first of all you will see this kind of window which says import android studio settings so if you are starting android studio for the first time i will recommend you to just leave this radio button on do not import settings here and then click on ok and then you will see this kind of window which says help improve android studio i don't want to share any uh data with Google so I'm going to click on don't send here and You can see this kind of Android studio setup wizard.
So at this point, I'm going to click on next here and Then I'm going to choose the standard installation type You can also choose the custom one but I will recommend you to choose the standard one for now and then click on next and Then you will see these settings so you can verify all these settings here and then if you are happy with all those settings click on next then on this next window you will see this license agreement so if you want you can read these license terms and conditions and if you agree with those license terms and conditions click on accept here and also select the second item here in this list which is the SDK arm then accept here also okay so you need to accept in both the sections one for Android SDK license and other for Android SDK arm dbt license once you see this finish button click on finish which is going to start the download of all the components which Android studio requires for its installation so this setting up of components will only happen once when you start your Android Studio for the first time so at this point you just need to wait for few seconds until this installation of all those components is going on and now as you can see after few seconds I can see this finish button here so I'm going to click on this finish button which is going to start Android Studio on my Mac operating system so once your Android Studio starts we are going to go to the plugins section here and then we are going to search for flutter here and you will see this result for flutter so i'm going to click on install and then click on accept which is going to install this flutter plugin in addition it's also going to add the support for dart so dart will also be installed so i'm going to click on install here and then it's going to install flutter and Also, it's going to install the Dart programming language. Once this is downloaded, it's asking me to relaunch the Android Studio. So I'm going to just click on Restart IDE and then click on Restart, which is going to restart my Android Studio IDE. Once my Android Studio IDE starts, I can see this new option here for creating a new Flutter project. So once you have installed the Flutter plugin here, let's open our terminal and let's run this command, which is called Flutter.
Dr. Command and then press Enter, and it's going to show you the status of all the tools. So when I run Flutter Dr. Command, I can see under Android tool chain that the command line tools component is missing here. Right? So let's see how we can solve this problem.
So for this, open your Android Studio, and then If you see this kind of interface, then select More Actions, and then select SDK Manager, and then select Android's SDK option here, and you will be able to see this SDK Tools option. And here you can see the Flutter doctor command is complaining about this option, which says Android SDK command line tools, which is not. installed yet. So we are going to just check this checkbox and then click on Apply and then click on OK, which is going to install the Android SDK command line tool.
Once that's done, just click on Finish. And now you can see this is installed and we can run the command once again. So I'm going to click on OK. And then once we run the Flutter doctor command once again, You can see that error is gone.
So now I have one more warning here, but I don't see this command line tools component is missing error, right? So now I have one more warning here, which says some Android license not accepted. So for this, I'm going to run this command, which is suggested here.
So for this, I'm going to run this command, which is flutter doctor space hyphen hyphen. android hyphen license you can see this command i have already typed which is flutter doctor android license press enter and then press y here and then press enter and once again press y and then press enter and then just keep on pressing y until this license terms and conditions is accepted right so once you see that all sdk package license accepted I can run the flutter doctor command once again. And this time, I can see that Android tool chain is now fully installed.
So now when I run the flutter doctor command, I can see this Xcode error, which says, and it says Xcode installation is incomplete. A full installation is necessary for iOS and Mac OS development. So to solve this, we just need to open the Xcode.
I'm going to just search for Xcode and then open this Xcode. Once this Xcode opens, you will see the Xcode menu at the top. Just click on Xcode here and then select settings here. If you see preferences option, you can select the preferences option here. Once you do that, just select locations tab here.
So select location tab. And here, if you see this command line. tool empty then select the version of xcode and it's going to ask you to provide your macbook's password which you use to log into your macbook so i'm going to just provide that password and now i can see that this xcode version is selected now let's run this flutter doctor command once again and now that error which we were seeing is gone right So now we have successfully installed the essential tools for Android development and also the essential tools for the iOS development.
Earlier we were seeing this Xcode related error. Now we are just seeing this CocoaPad not installed. That we will not require for now, so I'm going to leave it as it is, but other tools are installed, right?
So now what I'm going to do is we have already installed the Flutter plugin here. So I can see this new Flutter project options. I'm going to click on this option and then from the left hand side menu, if you see this kind of option which is selected for new project, just select Flutter here first. So select Flutter and you will see the path of your Flutter SDK. Here, click on next and then give any name to your Flutter project.
So I'm going to give the name my underscore Flutter underscore app here. And you need to give this name all in small letters separated by underscores. In the organization, you can leave it as default, but later you might want to change this organization, right?
We are just testing, so we can leave all the other things as default and then click on create, which is going to create our Flutter project. Once this Flutter project is created, you will be able to see this kind of Flutter project with your project name. If you see here Android option instead of project, so just click on this drop down menu and then select project here.
Okay, now once your Flutter project is created, to run your Flutter app in the default Android emulator, what you can do is in this device section, right now no device is selected, just click on this drop down menu. And then you have this Chrome web, macOS desktop, and you also have iOS simulator option here, and you also have the Android emulator. So one Android emulator is the default emulator, which comes with Android Studio.
You can also install the new Android emulator, okay? So first of all, we are going to run our app in the Android emulator. So just select open. Android emulator which is given here and once this device is selected here click on this run button Which is going to first build your project and then it's going to launch your app into the Android emulator So you need to wait for some time until you can see this process is finished here, right?
so right now it's running the Gradle task and then from here you can see Right now, this emulator is running. I'm going to stop this, and then I'm going to once again relaunch this. So it's going to be stopped, and you can see lost connection.
I'm going to click on Start again, which is going to start this Android emulator, right? And then when you run your application by using this Run button, your application will be launched in this emulator. So you can see. Now our application is launched in this Android emulator.
Sometimes it's hidden in this menu. So you can just click on this running device option on the right-hand side, and it's going to open your Android emulator. Now let's stop this, and then let's try to run this app on the iOS device. So now this time I'm going to select the... Open iOS Simulator option.
So just select Open iOS Simulator, which is going to open the iOS simulator. Because we have installed the Xcode and Xcode toolchain, this iOS simulator comes with that. Once this iOS simulator starts, then from this list, just select the iOS simulator which you have started.
So in our case, we have started this iPhone. 14 Pro Max iOS simulator, so I'm going to select this and Once you see iPhone simulator selected here click on run again And it's going to launch your app into the iOS simulator. Just wait for few seconds here now I can see my app is launched in the iOS simulator And I can click on plus here and it increments the number so I can also test my application in the iOS simulator right so this is how you can set up the flutter using android studio on the ios simulator and the android simulator on your mac operating system i hope you've enjoyed this video and i will see you in the next video