Setup a Flutter Developer Environment on Chrome OS

If you have a slow or old machine but still want to write a code on Flutter, you can try to install Chrome OS clone and give it a try.

The same settings I hope will work on original Chrome Book as well, but I don’t have it by hand to try.

I’ve made this setup on my PC with CloudReady OS from NeverWare

I presume the you’ve already installed CloudReady or any other type of Chrome OS.

Step 1 – Install Linux (Beta)

Open Settings Select “Linux (Beta)” at the left pane and click “Turn on” button at the right:

Click “Next” to install Linux:

Select “Custom” Disk size and give at least 16Gb to Linux. Default value is 5 Gb, but it’s not enough for Android Studio. Even 10Gb is not enough, so give it at least 16Gb :

Wait a few minutes while Linux installing. Notice you’ll need working Internet connection to install Linux:

After installation installer will open a Linux terminal. Leave it opened, we’ll need it later.

Step 2 – Install Flutter

Go to flutter.dev and download flutter for chrome OS. Select destination folder for download – Linux files:

After download complete, open Linux terminal. Unpack downloaded Flutter and remove downloaded archive to save some space. Execute the following commands in terminal:

$ mkdir ~/Developer

$ cd ~/Developer

$ tar xvf ~/flutter_linux_1.22.3-stable.tar.xz

(your filename with flutter archive maybe different when the new version will be released)

$ rm ~/flutter_linux_1.22.3-stable.tar.xz

Configure Flutter PATH

Install nano linux editor to edit configuration files. Open Terminal and execute the following command:

$ sudo apt -y update && sudo apt -y install nano

Now we need to edit profile file to add Flutter binaries. Again in Terminal execute the following command:

$ sudo nano -w /etc/profile

Edit file and add Flutter binary files path to PATH variable.

Add the text written in bold (change to path where you have flutter files installed):

if [ "id -u" -eq 0 ]; then
PATH="…"
else
PATH="/usr/local/bin:…:/home/someuser/Developer/flutter/bin"
fi
export PATH

Reboot the system to make sure your settings are working. After reboot open terminal end execute:

$ which flutter

It must show the next line:

/home/someuser/Developer/flutter/bin/flutter

If it’s not showing this, double check that you entered your flutter directory correctly.

Step 3 – Install and configure Android Studio IDE

Download Android Studio for Chrome OS – go to https://developer.android.com/studio and click “Download Android Studio”:

And again, save package to “Linux files”:

After download completed, go to terminal and install .deb package. Execute the following command:

$ sudo dpkg -i android-studio-ide-201.6953283-cros.deb

(You file name may differ when the new Android Studio version will be released).

If you created a Linux box without enough disk space, you’ll receive out of space errors here. In this case, remove the Linux in settings and create it again with more disk space. And complete all the previous steps.

After successful installation you’ll have Android Studio icon in your applications dashboard:

Remove Android Studio package to save disk space:

$ rm ~/android-studio-ide-201.6953283-cros.deb

Start Android Studio. Choose “Do not import settings”:

On the Welcome screen click “Next”:

Select “Standard”, click “Next”:

Select UI theme of your choice, click “Next”:

Verify settings, click “Next”:

Click on instructions on how to setup Android Emulator, otherwise click “Next”:

Wait about 10 minutes for Android Studio download ind install needed components.

Click “Finish” when installation complete.

Android Studio will open a welcome window. Now we need to install flutter plugin. Push “Configuration” at the bottom right of the welcome screen and select “Plugins” from drop down menu.

Type “flutter” in the search field at the top right of the plugins screen, select “Flutter” and click “Install”. It’ll ask you to accept license and to install Dart plugin. Click “OK’ on both popup windows.

After installation, the “Install” button will change to “Restart IDE”. Push it and Android Studio will restart.

After restart of IDE you’ll have a new option in welcome screen menu – “Create New Flutter Project”.

Click on it and you’ll see the next window:

Select “Flutter Application”, click “Next”. You’ll see a project setup window:

Notice the error “Flutter SDK path not given” at the bottom left corner. To fix it click the button with 3 dots next to the “Flutter SDK path”.

Select the folder where you’ve installed Flutter in previous steps, in my case it’s /home/ikarelin/Developer/flutter . Click OK. If you entered a folder correctly, the error sign on “New Flutter Application” will disappear. Click “Next”. Set the package name on next window and press “Finish”.

Flutter will create a new default project after some time depending on your computer speed and open a main Android Studio window.

Congratulations !!! Now you have a fully functional Flutter Developer Environment on you Chrome Book. Have a nice time and happy coding 🙂

Leave a Reply