Install (Flutter + VSCode) on Linux successfully!

kaysoohyun

KaySoohyun

Posted on July 16, 2021

Install (Flutter + VSCode) on Linux successfully!
Hi everyone! This is my first post! I really don't like do this but i like to help so here i am.
I don't know how is in other distros or with android studio, i just tell my case. I have installed it five times, the first two were very difficult and I did not understand anything. But the third time I understood and wrote a guide on paper. The fourth time I followed the guide and it was super easy. The fifth times I tried to improve the guide and failed hahaha. But I read a lot on the web for the first few times and didn't find the answer, so this post is for people like me who couldn't solve their problems: "Here is the solution" (I really hope this helps someone).
PS: If you ask me why I installed five times ... well ... I really like to format my computer and the second and fourth times were on my sister's computer. She also formatted her computer.
Here we go, the goal is install flutter and run with vscode on linux so you need a computer with internet and a linux distro. I'm a arch linux user but i don't gonna put exclusive commands.

The happiness recipe:

Installing flutter

  1. Install the flutter package.

I did yay -S flutter and ask me what java want to install. If your package manager don't installs you a java version you must do it by your own.

  1. Select or install jdk8-openjdk.

I recommend version 8, first I tried with 14 but some errors appear, and I read on stackoverflow that with 8 everything works fine.

  1. Run flutter doctor. It will tell you that you don't have permission to create a directory.

  2. Run sudo chown -R user /opt/flutter.

This is gonna change the owner of the directory where flutter is installed and now the directory will be yours, not of root, so you can make things inside. I tried change only the permissions of the directory and failed, it still told me that I had no permissions.

  1. Run again flutter doctor and now is gonna to download the dart sdk and a few more dependencies. After finish it show you whats need flutter to run. Is there three points: Check [✓], Warm [!] and Wrong [✗]. If something is wrong flutter don't run so we have to fix it. (Like bob the builder says, Yes we can!). After every install step run flutter doctor, i added a table with the result so you can compare.

Current state

Flutter
Android toolchain
Chrome
! Android Studio
Connected device

Installing Android SDK

  1. Install Android SDK. The must packages are:
android-sdk-build-tools
android-sdk-platform-tools
android-platform
Enter fullscreen mode Exit fullscreen mode

After that, if you run flutter doctor it says Android licenses not accepted .

  1. Run sudo chown -R user /opt/android-sdk/ and change the owner of the android-sdk directory.

If you try to accept the licences before, even if you say yes, the value don't save because you aren't the owner or you don't have permission to do things on that directory. So, you change the owner and then accept the licenses.

  1. Run flutter doctor --android-licenses and say yes to all question to accept them.

Current state

Flutter
Android toolchain
Chrome
! Android Studio
Connected device

Maybe you have Chrome checked, if is that case, you can ignore the next tip.

Installing Google Chrome

You must have some browser on your computer. I tried with Google Chrome and Chromium and works good, but i don't know if works with others. I write this using Google Chrome.

  1. First, install the browser if you don't have it yet.

  2. Find the path where is installed with which google-chrome-stable.

  3. Edit the file .bashrc with nano or with your favorite text editor. The file is hidden on your home directory.

  4. Add this lines replacing with the correct path:

export ANDROID_SDK_ROOT=/opt/android-sdk
export CHROME_EXECUTABLE=/usr/bin/google-chrome-stable
Enter fullscreen mode Exit fullscreen mode
  1. Save the file and run source ~.bashrc to reload the terminal and load the changes (or simple close and open again).

  2. Run flutter doctor and the third item is checked now.

Current state

Flutter
Android toolchain
Chrome
! Android Studio
Connected device

The four and five items don't been necessary now. Let's go with vscode things now.

Installing Visual Studio Code

  1. Install vscode if you don't have it.

  2. Go to Extensions, search flutter and install it.

  3. Open the integrate terminal and run flutter doctor:

  4. Everything is fine and works good! Yey!

  • WTF is flutter? well.. if you have this error, you have to go to File > Preferences > Settings, type terminal and change the default for xterm. This is because your flutter is configurated to use other shell. Reload vscode and try again.

  • Don't find the google path again.. Open with the text editor .config/Code - OSS/User/settings.json and add the following line with the correct path:

"dart.env":
  {
    "CHROME_EXECUTABLE": "/usr/bin/google-chrome-stable"
  }
Enter fullscreen mode Exit fullscreen mode

Reload the vscode and run again flutter doctor, this should works now.

And done! Yey!

Extras:

  • If you failed installing google chrome is because maybe you don't have bash! Don't panic, you just have to find the equivalent for your shell. You just need to know where is the config file (always is hidden on home directory but the name change according the shell). And if you have another shell when you install vscode and get some error you have to set your shell, not mine.

  • If you use your cellphone like emulator, when you connect it to the computer select the option "transfer photos" if vscode don't recognize.

  • Maybe you wanna try vscodium, is just like vscode but without the telemetry, i find it recently.

  • All comments and suggestion are welcome! And if you have some question tell me and i gonna try to answer it.
    Lastly, I speak spanish so, maybe i have some errors on redaction, please help me if you can! And if you find a better way to do something, tell me too! Everything is welcome :D You can send me a message on social medias or telegram, find me @kaysoohyun

Hope this help somebody! Thanks for reading!

💖 💪 🙅 🚩
kaysoohyun
KaySoohyun

Posted on July 16, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related