Hello! After learning a bit about Dart, I think we're ready to set up our machine to work with Flutter. I will explain the installation on both Windows and Mac devices so you shouldn't have problems. You can follow the official documentation like me here.
Flutter can be installed on Linux devices too but I haven't tried it yet so I am not too confident with it.
Windows
SDK
First of all, go to the documentation I gave before and select Windows from the 4 OS buttons.
After that go to the section Get the Flutter SDK and download the zip file.
Now you have to choose where to have the SDKs of both Flutter and Android Studio. I prefer putting them in a folder called sdk in my main directory. If you wanna follow me, go to your main folder and create a folder called SDK, in it, create 2 folders: flutter and android.
Now unzip the folder that you've downloaded in the Flutter folder you've just created.
Then go to this folder and find a directory called bin, click on it and then copy its path. After that, in your Windows search bar, type env and enter. Then click on Environment Variables, then on PATH and add the path you've copied before.
Flutter Doctor
Flutter Doctor is a tool to check if you have all installed for Flutter. To use it just run flutter doctor in your preferred terminal:
$ flutter doctor
You should a warning saying that Android Studio is missing:
[-] Android toolchain - develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://docs.flutter.dev/setup/#android-setup for detailed instructions.
We can fix this by installing Android Studio.
Android Studio
Android Studio is a Google IDE created for app development. With Android Studio we can develop apps both in Java and in Flutter. To run the app we can use an Android Emulator. To add one we first need to install Android Studio with this link.
When you go through the installation make sure to install the AndroidStudio SDK in the folder we created at the beginning: ~\sdk\android.
Now, to install an emulator, go to the 3 dots for more options and click on Virtual Device Manager and create a new emulator with the settings you want (make sure to not add an old emulator).
VSCode as Editor
To set up Visual Studio Code as the editor for developing apps with Flutter we first need to add some things.
First of all, install the Flutter extension from the extension store and, if you want, install other extensions for Flutter shortcuts.
MacOS
If you have a Mac, follow these steps which are for version 10.4 or later.
SDK
First of all, we need to install the Flutter SDK. To do this go to the official documentation, select MacOS and download the .zip file.
Now we need to add the flutter commands globally, so set the bin folder in the path. First of all, run one of these commands based on your terminal:
// using bash
$ nano $HOME/.bash_profile
// using Z-shell
$ nano $HOME/.zshrc
Now add this line at the end of the file: export PATH="$PATH:$HOME/flutter/bin" modify the PATH with your case.
Now exit nano with Ctrl + x and open a new terminal where we test if Flutter has been installed with this command (it should give the path of the Flutter folder):
$ where flutter
And check if we've installed everything with the flutter doctor:
$ flutter doctor
XCode
To emulate iOS devices to run applications we need XCode. To install it simply open the App Store and type "XCode" and install it (it should take between 30min to 2h).
Once you've installed it and have everything ready, open a new terminal and write the command:
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
This will install the tools to get XCode to work with Flutter.
CocoaPods
After installing XCode, we need the dependencies manager CocoaPods. It is needed for the building of our Flutter App. To install it, simply write the command:
$ sudo gem install cocoapods
And, after giving administrator permissions, we can finish all by typing:
$ pod setup
Check for Errors
To check for any errors, simply run the flutter doctor:
$ flutter doctor
If everything is ok, you can launch your iOS emulator with this command:
$ open -a Simulator
The default emulator should work fine but you can always modify it for different performances and cases.
Now you're ready to develop apps with Flutter. Well ... not exactly because you still don't know how to create an app. We're going to see it in the next post.