DEV Community

nabbisen
nabbisen

Posted on • Edited on • Originally published at scqr.net

Flutter 3 on Devuan 4: Getting started

Summary

Flutter is one of the mobile app frameworks developed by Google which supports both Android and iOS. It is cross-platform and being advanced to be applied to other platforms. Their official website says:

Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.

On May 12, 2022, its latest major version, 3 was released.

I built the dev env on Devuan GNU+Linux, a fork of Debian without systemd. It resembles my past trial on Artix Linux.

This post shows how I did it.
It is manual installation without Debian package management system (apt-get etc.). However, it isn't complicated thanks to the officially distributed packages.

Environment

  • OS: Devuan 4 (Chimaera)
  • App Framework: Flutter 3
  • Programming Language: Dart
  • IDE: Android Studio 2022.3.1.18

Tutorial

All doas from OpenBSD's can be replaced with sudo.

Get Android Studio (IDE)

Install it and configure. This post may be helpful.

Install dependencies

Run:

$ doas apt install cmake clang ninja-build libgtk-3-dev
Enter fullscreen mode Exit fullscreen mode

Get Flutter and Dart SDK

Flutter

Get the .tar.xz package in "Install Flutter manually" in the official docs.

flutter-package-officially-distributed

Then run to extract:

$ tar xJf flutter_linux_3.xx.xx-stable.tar.xz
Enter fullscreen mode Exit fullscreen mode

Dart SDK

Get the .zip package in "Stable channel" in "Dart SDK archive" in the official.

dart-sdk-package-officially-distributed

Then extract all from it.

Set up PATH environment variable

Update PATH to let them available in IDE:

$ export PATH=(readlink -f dart-sdk/bin):"$PATH"
$ export PATH=(readlink -f flutter/bin):"$PATH"
Enter fullscreen mode Exit fullscreen mode

The order above is important: First dart-sdk comes and then flutter does. It means we should be careful that flutter should be resolved earlier than dart.
Otherwise, you will meet the warning from flutter doctor:

! Warning: `dart` on your path resolves to
  /(...)/dart-sdk/bin/dart, which is not inside your current
  Flutter SDK checkout at /(...)/flutter. Consider adding
  /(...)/flutter/bin to the front of your path.
Enter fullscreen mode Exit fullscreen mode

How to update PATH at login (Optional)

Well, it should be useful to add them to PATH environment variable at login.
It's done, for example, by editing ~/.profile.

export PATH="$HOME/(...)/dart-sdk/bin:$PATH"
export PATH="$HOME/(...)/flutter/bin:$PATH"
Enter fullscreen mode Exit fullscreen mode

In addition, with multiple variables to be added, a list as below and for-loop statement are also available.

for x in \
    $HOME/(...)/(something to be added) \
    $HOME/(...)/dart-sdk \
    $HOME/(...)/flutter
do
    if [ -d "$x" ] ; then
        PATH="$x/bin:$PATH"
    fi
done
Enter fullscreen mode Exit fullscreen mode

Set up CHROME_EXECUTABLE in case of Chromium used (Optional)

In order to pass tests by flutter doctor perfectly, you must have either Google Chrome or defined CHROME_EXECUTABLE.
Chromium was my choice and thus I ran:

$ export CHROME_EXECUTABLE=/usr/bin/chromium
Enter fullscreen mode Exit fullscreen mode

Configure IDE

Open "Settings" in "File" in the top menus and choose "Plugins".

Install "Flutter" and "Dart".

ide-setup-flutter-dart-01

You will see warning on Flutter. It has to be accepted:

ide-setup-flutter-dart-02

After Flutter plugin installed, you will be required to "Restart" IDE.

ide-setup-flutter-dart-03

Next, we have to install Android SDK Command-line Tools.

Open "Settings" again and go to "Languages & Frameworks" > "Android SDK" > "SDK Tools".
Check "Android SDK Command-line Tools (latest)" and click "OK"s.

ide-setup-flutter-dart-04

ide-setup-flutter-dart-05

The download will begin and finish after a while:

ide-setup-flutter-dart-06

Run flutter doctor

You have two tasks left: Agree to the Android licenses, and validate your environment.

They are done by flutter doctor, one of the flutter commands.
Open terminal and run to deal with the first task:

$ flutter doctor --android-licenses
Enter fullscreen mode Exit fullscreen mode

You will be asked if agree to each of them.

Next, run to validate:

$ flutter doctor
Enter fullscreen mode Exit fullscreen mode

Printed out as below ?

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on Devuan GNU/Linux 4 (chimaera) 5.10.0-23-amd64, locale
    en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2022.3)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!
Enter fullscreen mode Exit fullscreen mode

Congratulations 🎉🎉

Opt out telemetry by Flutter (Optional)

Additionally, if you want to opt it out, run:

$ flutter --disable-telemetry
Analytics reporting disabled.
Enter fullscreen mode Exit fullscreen mode

Create a Flutter project

Now we are ready. Let's create your first project !!

Start Android Studio and click "New Flutter Project".

flutter-project-01

After validating the paths of flutter and dart, click "Next":

flutter-project-02

flutter-project-03

Enter and confirm the project information, and click "Create":

flutter-project-04

After a little short, the creation will be completed.

flutter-project-05

Shall we run the default demo ? Start the virtual device in "Device Manager":

flutter-project-06

Then run the app by clicking the green triangle button at a little right to the center in the second-top bar.
Alternatively, push Shift + F10, or click [Run] - [Run 'app'] in the top menus.

flutter-project-07

Your flutter app is here !!

Editing examples

The below is a small trial to customize it: Changed the title phrase and also color theme. (Line 31, 34)

flutter-project-08

Build executable for Android mobile

Here is another small trial. You can build APK or App Bundle:

flutter-project-09

...and deliver it easily ;)

flutter-project-10

Conclusion

You got ready to develop Flutter apps. I hope you enjoy the cross-platform development 💫

Besides, there may be other ways to install them, although there doesn't seem no such Flatpak packages in Flathub. For example, some scenario to use some release channel or Docker / Podman. Additionally, when you use a different Linux distro where systemd is adopted and therefore can do Snaps (Snapd), you have another possibility.

🎶 🎵 🎸 Happy development 🥁 🎶 🎵

Top comments (0)