Flutter Installation — Flutter Basic Programming — Part 2

Hello guys. Today i’ll help you on installation Flutter because i see many newbie got problem with that (most on set up environment). And another cool packages that help you manage Flutter and using multiple Flutter version. Now let’s FlutterWithMe!

I know that on Flutter Install already have full guide for installation. So i’ll going fast on which part i think it’s un-necessary.

Windows

• Download lastest stable release Flutter SDK. Or you can visit SDK Release to find which version you want. After finish, extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\flutter).
• If you wish to run Flutter commands in the regular Windows console, take your time to addFlutter to the PATH environment variable.
• Open window search and type env and select Edit environment variables for your account.

Find edit environment variables

• Select edit PATH from User variables:

• Click new to create new input and type path of Flutter bin folder that you’re extract in previous step:

• Open command promt and run “flutter doctor” to see overview of Flutter environment.

Android Studio

If you aren’t install Android studio, can download at here. After install finish, remember to setup your device to test on real device or on Android emulator.

• Remember install JAVA 8 and add JAVA_HOME to your System variables.

• Run “flutter doctor --android-licenses" to signing licenses on Android.
• Open Android Studio, open File -> Settings -> Plugin to install Flutter.

• After install Flutter and restart IDE, open File -> Settings -> Languages & Frameworks -> Flutter. Select Flutter SDK Path that already install from previous step then apply.

MacOS

• Download lastest stable version Flutter SDK for MacOS. Or you can visit SDK Release to find which version you want. After finish, extract your download file into your user location. ( For me i extracted into Users/nguyenhuyhoang(my macOS name)).

Update PATH variable

To update your path variable on MacOs it’s difference with Windows.

If you’re using zsh.

• Open terminal -> type command “vim .zprofile” -> enter zprofile variable file.
• Type “i” to change into insert mode -> insert “export PATH=”PATH:”HOME/flutter/bin” if you set flutter extract location like me inside HOME folder. If haven’t, go to flutter folder that you’re extracted and open -> right click -> Get Info -> right click on “Where” -> Copy as PathName

• After add export success, type “esc” and then type “:wq!” to exit edit mode.
• Quit the Terminal and open it again to refresh.
• Type “echo $PATH” to check that the path was correctly added.
• Type “which flutter” to verify the flutter command is available. And then type “flutter doctor -v” to check the Flutter version.
• Install XCode if you haven’t install.
• Run sudo xcodebuild -license to accept the license agreement.
• If running the flutter command fails and you get an xcrun error, try typing xcode-select --install to update the Command Line Tools and then restart the Terminal again.
• Now you might get an error saying: “dart” can’t be opened because Apple cannot check it for malicious software. The only option I found to remedy this is to globally disable Gatekeeper by typing sudo spctl --master-disable

Flutter Version Management (FVM)

This’s a simple CLI that help you manage Flutter SDK versions when you have too many version need to run in one machine. So i’ll introduce here and have guide to help you install it. You can read through this docs.

Installation

Windows

You can install fvm Standalone with :

choco install fvm

or with pub package, but i prefer you’re using Standalone because it’ll manage you global Flutter install.

dart pub global activate fvm

MacOS

You can install fvm Standalone with :

brew tap leoafarias/fvm
brew install fvm

or with pub package, but i prefer you’re using Standalone because it’ll manage you global Flutter install.

dart pub global activate fvm

Configuration

Before configuration, you should:

• If you want to config global version, use “fvm global {channel}” Ex: “fvm global stable”. And then run “flutter doctor -v” to check version.
• If you want to config inside one project, open project terminal and type: “fvm use {version/channel}” Ex: “fvm use stable (or fvm use 2.10.3)”. After that fvm will check to see that you have install this version or not, if haven’t please type “y” to install this version.

• After install and config for project only, your project will have “.fvm/flutter_sdk” and “.fvm/fvm_config.json”. Remember to ignore flutter_sdk folder when push code into source control.

• Instead of running flutter command “flutter pub get”, change to “fvm flutter pub get” to run on fvm command to using fvm version.
• On VSCode, you can add version symlink for a dynamic switch on settings.json file in vscode folder.

{
"dart.flutterSdkPath": ".fvm/flutter_sdk",
// Remove .fvm files from search
"search.exclude": {
"**/.fvm": true
},
// Remove from file watching
"files.watcherExclude": {
"**/.fvm": true
}
}

• On Android Studio is difference, you need copy absolute path of fvm in project directory.

absolute path from fvm flutter sdk

• Open File -> Settings -> Languages & Frameworks -> Flutter. Change flutter SDK path with your previous fvm flutter sdk path.
• Restart Android Studio to see the new settings applied.

That’s all for installation guide for Windows and MacOS. Hope that set up path environment would help you guys worked when setup path in Flutter also with FVM for easier to change version Flutter you want. Thanks for your reading time!