Setting up Flutter environment (2023)

Hello devs, all we know that the first step to start coding is setting up the environment and this is not one thing that you can avoid even if is boring trust me. So in this little article I’ll try to do it in a easy way so you can do this important step faster.

As a Flutter developer you have to install the Android and iOS (if you are using a Macbook) in order to compile the code to these platforms at least.

If you are using a Macbook you can install the Xcode if you want to compile for this platform, and to do it just go the App Store and search for Xcode.

xcode

I already have it installed so that's why it says "open" instead "get", but if you don't have it installed just click on "get" and wait to complete the installation.

And once it's done, open the Xcode to finish the additional components installation and you should see something like this.

The next step is download and install the Android Studio, and this step is the same as any other program you already installed on your computer, just download and install, and then you will have something like this.

Android Studio

One thing that is going to be needed in the future is that you have somehow to find the Java SDK in your machine, and to do this go inside your Android Studio’s folder installation, copy and paste the “jrb” folder and then rename it to “jre”, so the final result shoud be like the image below.

jre

So after doing it, just put the “jre” folder path on your environment variables as the image below.

Java

For others operating systems than MacOS just Google how to do it, but if you are using a MacOS, you just have to create a file called ".zshrc" on your user root folder and then add this content below in this created file.

export JAVA_HOME=/Applications/Android\ Studio.app/Contents/jre/Contents/Home

One thing that is worth to mentioned, is that the .zshrc file might be hidden if you already created before. In MacOS you have to press shift + command + . in order to show these hidden files and if you are using a different operating system Google how to do these stuffs.

.zshrc

Now if everything is ok, try to run the command as the image below to check if the Java is correctly configured.

Java

Now let's install a package manager to help installing some stuffs we need, In the MacOS case it's going to be the Homebrew, and if you are not using a mac I really recommend you to find a equivalent for your operating system.

So… go ahead and install your package manager, and in the Homebrew case just go to their website copy and past the installation command on terminal and that's it.

Homebrew

And once it's finished, install the next tools running the commands below on the terminal.

1. brew install git
2. brew install cocoapods (MacOS only)

Git is a tool which is going to help you managing the code versions you will write, and if you don't know what I'm talking about, please Google it.

The cocoapods on the other hand is a dependency manager for iOS, and if you are using a Macbook and want to develop for iOS, this one will do the job when it comes to install the necessary things to make your app running once you compile your code for iOS.

Ok, so… now it's time to install the Flutter SDK, and to do that since you have the Git installed on your machine, just open the terminal and navigate to your user's root folder and run this command bellow.

git clone https://github.com/flutter/flutter.git -b stable

And when the download finishes, open the ".zshrc" file that you already created, and add this two lines at the top of the file, like the image below. By the way, replace the name of your user pls, otherwise this is not going to work.

.zshrc

export PATH="$PATH":"/Users/<user>/flutter/bin"
export PATH="$PATH":"$HOME/.pub-cache/bin"

Well, if everything is ok… on your terminal run the command below to check if your Flutter SDK is configured correctly, and if you get some instruction to run another command, just do as the message tells to do.

flutter

Now you have to choose a IDE to write your code, as I'm using the vsCode I'll show you what I have configured here in my machine.

I'm not going in details but the extensions you will need is just the dart and flutter, and the other ones is a plus. So go search for each one of these and see what make sense to use.

vsCode

If you're still here and use vsCode, let me give you a pro tip… open your user settings.json and add this configurations to help you even more with your productivity.

{
    "[dart]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.codeActionsOnSave": {
            "source.organizeImports": true,
            "source.fixAll": true,
        },
        "editor.defaultFormatter": "Dart-Code.dart-code"
    },
    "explorer.fileNesting.patterns": {
        "pubspec.yaml": "pubspec.lock,pubspec_overrides.yaml,.packages,.flutter-plugins,.flutter-plugins-dependencies,.metadata",
        "*.dart": "${capture}.g.dart, ${capture}.freezed.dart",
    },
    "editor.bracketPairColorization.enabled": true,
    "redhat.telemetry.enabled": false,
    "dart.renameFilesWithClasses": "prompt",
    "dart.previewFlutterUiGuides": true,
    "editor.stickyScroll.enabled": true,
    "explorer.fileNesting.enabled": true,
    "explorer.fileNesting.expand": false,
    "git.enableSmartCommit": true,
}

It wasn't that bad right? Well hope not, so now go ahead and write some code and be happy. Cheers!