Notes

Getting started with Flutter

Edit on GitHub

Programming
3 minutes

Setting up on Linux

Download and extract the Flutter SDK

  • Extract the tarball where you want, usual places are /usr/local/ and /opt
  • Update $PATH

Install VS Code extension ext install ms-vscode.cpptools

At this point, if you run flutter doctor it’ll look up your system for development capabilities. For example, it told me i didn’t have the Android toolchain and Android studio not installed so couldn’t develop for Android. Also, no connected devices.

  • Install Android SDK separately to avoid issues with finding Android SDK later
    • apt install android-sdk will install to /usr/lib/android-sdk
  • Tried installing Android SDK separately, Android Studio gave the location not accesible error. Went back to installing in home directory.

Install Android Studio

  • Extract the tarball where you want, usual places are /usr/local/ and /opt
  • InstallAndroid Studio by running ./studio.sh inside the android-studio/bin directory
  • Add Android Studio to $PATH
  • Add shortcut: Tools > Create Desktop Entry from the Android Studio menu bar

Setup Android device

  • Enable Developer Mode (Tap System > About > Build number 7 times) and USB Debugging (System > Developer options) on Phone
  • Install adb on my Linux system: sudo apt install adb
  • Make sure you’re in plugdev group sudo usermod -aG pugdev $LOGNAME (your user is likely to already be in the plugdev group..)
  • Make sure you are connected in File Transfer Mode (MTP). It’ll show you a prompt asking for permission to allow remote debugging.
  • Run flutter devices to make sure your device is connected. (You can also try adb devices)
 1# ~/.bashrc
 2
 3# Add Futter SDK to PATH
 4export PATH="$PATH:/media/aamnah/Files/Dev/flutterSDK/bin"
 5
 6# Add  Android Studio to PATH
 7export PATH="$PATH:/media/aamnah/Files/Dev/android-studio/bin"
 8
 9# Set ANDROID_HOME
10# i did this because i had moved the `~/.android` directory because i was low on space
11export ANDROID_HOME="/media/aamnah/Files/Dev/androidSDK"

At the end of it all, your flutter doctor output will look like this:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Linux, locale en_US)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Android Studio (version 3.5)
[✓] Connected device (1 available)

• No issues found!

Getting started with Flutter

Create a flutter app

1flutter create myapp
2flutter run
  • The app name needs to be lowercase_with_underscore
  • The first run would take a long time, i thought it got stuck on Gradle, and then it spent a bunch of time resolving dependencies.. It gets busy downloading stuff in the background..
Initializing gradle
  176.6s (!) = 3mins
Resolving dependencies
  448.7s (!) = 7.5mins

Enable web apps

  • Web support is not in production yet, it’s only available for testing
  • Debugging for web only works in Chrome
1 flutter channel dev
2 flutter upgrade
3 flutter config --enable-web
4 cd <into project directory>
5 flutter create .
6 flutter run -d chrome

1# generate a release build
2flutter build web

No Prettier or ESLint needed

Just run flutter format <filename>

Notes

  • If you’re coding in VS Code, you’ll have to press r manually in the terminal to hot reload the app. If you are using Android Studio, it will automatically reload on save.
  • In Android Studio, if you add a comment with TODO in the beginnig, you’ll be able to see all todo tasks in your project in the Todo tab at the bottom.
  • Prefixing an identifier with an underscore (e.g. _suggestions) enforces privacy in the Dart language.
Browse all topics