How to start a Flutter project (even with your low end computer) - A self tale

kpheine — Tue, 21 Jan 2020 11:54:01 +0000

As many Jr developers do, I've always flirted with the idea of being a mobile developer. And as we were approaching a new year, I decided to dive in this idea. Searched for some ways to start and really liked this dart flutter thing people were talking about. As a React developer, I felt that React Native would be "more of the same", and to be honest, I am always hyped about learning something new.
First things first, I was really focused in getting a really nice environment setup. No long build times, no autofill with weird suggestions, just me and my code and my debug version. So this is what I got after some digging, and I think it looks great!

1 - VS Code

Most programmers IDE of choice, and mine as well. there are some extensions to really get you up and running:

Dart and Flutter - Your bread and butter, these extensions are the basic, made by the Dart Code team, they have it all, snippets, debbuging, a smart autofill, auto commands for getting packages on save. They really made a great extension.

And thats it! These are the only mobile specific extensions I had to use besides common plugins I use for everything, like indent-rainbow and Todo Tree.

2 - Android Studio

"Wait, we're using two IDEs?" you might ask. But nope, we'll be using Android Studio just for managing our SDKs and emulate an Android via the Android Virtual Device (AVD). And this is how we do it:

It is really easy, just follow the installation guide and default setups. A key point is setting which SDKs you'll want to install, I definitely reccomend sticking to SDK 27 and up for compatibility reasons.

If you have a PC with good emulation specs, you can setup your virtual devices now, we'll talk more about it on sequence.

3 - Getting it running

Now this is the main point of this article, getting your app to run smoothly. You have basically two options for Android, running a virtual device (AVD) or on your own smartphone.

Android Virtual Device

The AVD is the most straightforward, just launch the Android emulator (you can do it via Android Studio or when you start the VS Code debug) and it automatically connects!

One of my earliest apps getting to know flutter (not despicted: my computer crying and freezing from running this emulator)

If your PC is not very font of emulating smartphones (like my laptop), you can choose the second option:

Running on a physical device (USB)

Now this one is tricky, but also the best option for low end PC users. First you need to enable Developer options on your device.

Go to Settings > System > About Phone
Click Build number 7 times

Congratulations! Now you're offically an Android Developer, at least for your phone. Now go to Developer Options and activate USB debbuging. Connect your phone to your PC, it will prompt you to allow debbuging on the smartphone, tap "Ok".
Now you re good to go! You can confirm by running flutter devices on your terminal and check the name of your device there.

This is really good and all, but you can improve even more the experience:

Running on a physical device (WiFi)

For this to work, we'll be using the Android Debug Bridge (ADB).

Note: You can install the ADB via your package manager, but this can lead to version inconsistency between scripts. I highly reccomend just running the following:

sudo cp ~/Android/Sdk/platform-tools/adb /usr/bin/adb
sudo chmod +x /usr/bin/adb

It will copy an existing ADB install that you may have from Android Studio setup into your bin folder, and allow you to run it.

ADB creates a server on your local network, and connects to your phone. First you need to setup your phone via USB, as we did earlier. Then, with your phone connected by cable, you run:

adb tcpip 5555

It will set your phone to listen for ADB in port 5555. You can now disconnect your phone physically.
Then search for your device's IP, it will be listed in Settings > About > Status > IP Address. Then you run:

adb connect [your IP here]:5555

It will start the bridge server and connect to your phone via IP, in the port you selected (5555). To check if you did it correctly, just run adb devices or flutter devices and it should show your phone. Check your VS Code and it should gracefully display your phone on the bottom right.

Proud owner of a Xiaomi Pocophone

4 - Get coding

You should be all set! You can learn Flutter on the official documentation or the many courses and lectures you can find online about. It is that easy to get started, and very easy to get going if you already have some experience with React.

Happy Coding!

DEV Community: kpheine