Flutter 2 on Arch Linux: Getting started

nabbisen

nabbisen

Posted on May 6, 2021

Flutter 2 on Arch Linux: Getting started

* The cover image is originally by LMoonlight and edited with great appreciation.


Summary

Flutter is one of the frameworks to develop mobile apps, a popular one. According to their official website:

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

The new major version, 2, was released on March 3, 2021.

This post shows how I built its development environment in Arch Linux due to the official documentation:

Environment

  • OS: Arch Linux
  • Mobile apps Framework: Flutter 2
  • Programming Language: Dart
  • IDE: Android Studio

Tutorial

Install dependencies

Pacman

Install Dart:



$ sudo pacman -Sy dart


Enter fullscreen mode Exit fullscreen mode

/opt/dart-sdk will be created.

Besides, you may find dart-sdk-dev in AUR, Arch User Repository, but I installed dart in galaxy/community repository here.

Optionally, install Kotlin in addition. JDK version will be asked if it is for the first time. It's OK to choose the default:



:: Synchronizing package databases...
 system                           225.2 KiB   172 KiB/s 00:01 [#################################] 100%
 world                           1615.2 KiB  1237 KiB/s 00:01 [#################################] 100%
 galaxy                          1535.9 KiB  4.41 MiB/s 00:00 [#################################] 100%
 extra                           1620.3 KiB   453 KiB/s 00:04 [#################################] 100%
 community                          5.5 MiB   786 KiB/s 00:07 [#################################] 100%
resolving dependencies...
:: There are 6 providers available for java-environment>=8:
:: Repository world
   1) jdk-openjdk  2) jdk11-openjdk  3) jdk8-openjdk
:: Repository extra
   4) jdk-openjdk  5) jdk11-openjdk  6) jdk8-openjdk

Enter a number (default=1): 
looking for conflicting packages...

Packages (4) java-environment-common-3-3  jdk-openjdk-15.0.2.u7-1  dart-2.12.2-1  kotlin-1.4.32-1

Total Download Size:   237.99 MiB
Total Installed Size:  618.73 MiB

:: Proceed with installation? [Y/n] y


Enter fullscreen mode Exit fullscreen mode

Also optionally, install android-tools so that you can use adb aka Android Debug Bridge and so on.



$ sudo pacman -Sy android-tools


Enter fullscreen mode Exit fullscreen mode

For your reference, Arch Linux has a wiki page about Android.

AUR packages

Install the packages from AUR.

Flutter


$ git clone https://aur.archlinux.org/flutter.git
$ cd flutter
$ makepkg -si
$ cd ..


Enter fullscreen mode Exit fullscreen mode
Android SDK

It's nothing to do here because it will be installed for the first configuration in Android Studio later.

Android Studio


$ git clone https://aur.archlinux.org/android-studio.git
$ cd android-studio
$ makepkg -si
$ cd ..


Enter fullscreen mode Exit fullscreen mode

Set permissions for Flutter

Add permission on /opt/flutter which is created in installing flutter:



$ sudo gpasswd -a <your-user> flutterusers


Enter fullscreen mode Exit fullscreen mode

Log out and log in again.

Run Flutter doctor

Launch Android Studio. The first configuration will start.
Choose your option on sending analytical data and so on, and click "Next" several times:

Android Studio SDK components Setup

And the installation of Android SDK and its platform tools will begin.
It will take time. When the process is finished, quit Android Studio.

Run flutter doctor with --android-licenses option to install Android licenses. You will be asked if you accept them:



$ flutter doctor --android-licenses
$ # choose "y", "y", ...


Enter fullscreen mode Exit fullscreen mode

After accepting all of them, run flutter doctor without any options, which will be successful:



$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.6, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] Connected device (1 available)

• No issues found!


Enter fullscreen mode Exit fullscreen mode

Well, some errors such as "Chrome is not found" which are not fatal will be printed in case. It's up to the env.

Prepare Android Studio

Launch Android Studio again. Select "Plugins" menu:

Android Studio open Plugins

Install "Flutter" plugin. Here, "Dart" is automatically selected and you will be confirmed to install it together:

Android Studio Plugins menus

After installation of them, click "Restart IDE" button to restart Android Studio.

Then you will find Flutter with Dart in "Installed" Plugins.

Android Studio Plugins Flutter and Dart

Create a project

In Android Studio start menus, you will see "Create New Flutter Project":

Android Studio Create a project

Choose "Flutter Application":

Android Studio Create a Flutter Application

"Flutter SDK path" is /opt/flutter:

Android Studio new Flutter application

Almost done.

Android Studio package name

Run a demo app

Your project will be generated and then you will see its directory structure as tree view.
lib/main.dart is the primary file.

Android Studio directory structure

Select device, and the emulator will start.
Click the "Run 'main.dart' (Shift+F10)" Button in the menu bar above, which is a green triangle to the right of "Loading Devices...".

Android Studio Flutter 2 demo app

Here is you Flutter 2 app in your hand 😃

Besides, you can also create another project with a menu.

Android Studio Create another flutter project

💖 💪 🙅 🚩
nabbisen
nabbisen

Posted on May 6, 2021

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

Sign up to receive the latest update from our blog.

Related