This post covers the installation and configuration of Flutter on Linux Fedora 31/32 in order to develop desktop, web and Android applications. iOS support and other aspects of app development such as prototyping are omitted for now.

The installation and configuration steps are deliberately given in the same order as during installation process on my computer.

First, what is Flutter and why should it be considered?

What is Flutter?

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

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase. The first version of Flutter was known as codename “Sky” and ran on the Android operating system. Wikipedia

Why I chose Flutter

Two years ago I started developing web-based applications, primarily for telemetry applications and local SMBs.

I didn’t face any major issues with backend development (mainly python-based) including but not limited to: database (SQL Alchemy and mongoDB), multi-threading and multiprocessing daemons, fault-tolerant protocol implementation, REST …

The main issue I encountered in my journey to become a full-stack developer was the frontend side of the game

I realized that the task of creating high-quality cross platform (web, android, iOS and PC) was tedious and difficult and required a large set of knowledge and skill sets that were far beyond what was possible to achieve as a solo-developer.

In my journey I tested and used several solutions, most of which were for python developers wishing to do some GUI development. Some of the solutions which I used include:

  • PyQt – a Python binding of the cross-platform GUI toolkit Qt
  • Plotly Dash – python framework for building web analytic applications built on top of Flask, Plotly.js, and React.js
  • Anvil – a free Python-based drag-and-drop web app builder
  • Jupyter notebooks – an open-source web application that allows you to create and share documents that contain live code, equations, visualizations and narrative text.

However, none of the options fully met my goals or solved the problems I faced. A solution based on a single language and a set of tools had to be found in order to cover all the tasks related to frontend design and interaction with the backend.

That is why I decided to give Flutter a try and I was amazed by the quality of the tools and the fluidity of the workflow.

Prerequisites

snap

In order to install snap use the command line:

sudo dnf install snapd

Then snap classic support should be enabled:

sudo ln -s /var/lib/snapd/snap /snap

Snap Store application can also be installed from the command line:

sudo snap install snap-store

tools

As stated by Flutter documentation, the following tools should be installed:

  • bash
  • curl
  • file
  • git 2.x
  • mkdir
  • rm
  • unzip
  • which
  • xz-utils
  • zip

Also the libGLU.so.1 library should be installed. The package providing this can be found using the command line:

dnf provides libGLU.so.1

To install:

sudo dnf install mesa-libGLU

When using the locate libGLU.so command I realized that the libGLU.so.1 file had been installed by snap. If asked I’ll check which of the installed libraries is being used by FLutter

Flutter installation

In order to install Flutter use this in the command line:

sudo snap install flutter --classic

Executing the following command will initialize the Flutter framework (download, install and initialize Dart and Flutter):

flutter sdk-path

The command itself is used to display SDK’s path

As this post was being written, Flutter web apps support was in beta stage. To use it the latest Flutter version from the beta channel should be installed:

flutter channel beta
flutter upgrade
flutter config --enable-web

Configuration

The first thing to do is to add the path to the SDK to your PATH environment variable. This can be achieved by adding the following lines at the bottom of the ~/.bashrc file:

# Flutter and Dart paths
export PATH="$PATH:PATH_TO_FLUTTER_SDK/bin"

Remember to reload the terminal for the changes to take effect.

~/.bashrc can be patched and the terminal’s environment reloaded as follows:

cat << EOF >> ~/.bashrc
# Flutter and Dart paths
export PATH="\$PATH:`flutter sdk-path`/bin"
EOF
. ~/.bashrc

The next big step of the configuration process is to run the flutter doctor command from the command line to verify dependencies.

Below is an example of the command output: flutter doctor first run

Several issues are to be noted:

  • The Android SDK is not installed
  • Android studio is not installed
  • Visual studio code is detected but the Flutter extension is not installed
  • No device is connected

Device configuration and connection will be addressed in a separate post

Additional tools installation

Visual studio code

To install VS code on a Fedora machine:

sudo snap install --classic code

Then the Flutter plugin should be installed:

  • Open VS code
  • Search for Flutter In the Extensions section
  • Click install

As shown in the image below, VS code is reported to be correctly configured:

flutter doctor after vs code Flutter extension was installed

Android Studio and Android SDK

Android Studio is the official Android app IDE based on IntelliJ IDEA from JetBrains.

you can use snap to install Android Studio:

sudo snap install android-studio --classic

JetBrain’s Toolbox App is another way to install Android Studio

Android Studio configuration

When Android Studio is started for the first time the Android Studio Setup Wizard is automatically launched. Follow the instructions as shown in the following screenshots: android studio setup wizard 1

The Standard Install Type is similar to the Custom one: android studio setup wizard 2

I prefer the dark theme: android studio setup wizard 3

I left these options untouched: android studio setup wizard 4

Please take note of the paths used: android studio setup wizard 5 android studio setup wizard 6

Depending on the Internet connection speed, the installation can take a while: android studio setup wizard 7

After successful configuration, the Android Studio Welcome window pops up: android studio welcome

The next step is to install the Flutter plugin for Android Studio. To do this, open the Plugins window by clicking on the Configure button, then click on plugins, then type flutter in the search bar, choose Flutter plugin from flutter.dev and hit Install: install flutter plugin

The Flutter plugin requires the Dart plugin to be installed: flutter plugin requires dart plugin

After successful installation of Dart and Flutter plugins, restart Android Studio: flutter plugin requires ide restart

Now that Android Studio is installed and configured, let’s check the output of flutter doctor: flutter doctor no licenses

So the next step is to accept Android licenses using flutter doctor

flutter doctor --android-licenses

Use the following command to point flutter doctor to the installation path of Android Studio:

flutter config --android-studio-dir=/var/lib/snapd/snap/android-studio/current/android-studio/

Now the flutter doctor output looks as follows: flutter doctor no dart no flutter

You can be safely ignore the two errors stating that Flutter and Dart plugins are not detected.

What’s next?

The next steps may include configuring and testing the Android Emulator, configuring on-device debugging, developing basic Flutter apps to explore different aspects of the SDK, exploring the features of VS code and Android Studio and exploring debugging tools.

References

Further details could be found in the following web resources:

Laisser un commentaire