Develop GUI apps using Flutter on Fedora

When it comes to app development frameworks, Flutter is the latest and greatest. Google seems to be planning to take over the entire GUI app development world with Flutter, starting with mobile devices, which are already perfectly supported. Flutter allows you to develop cross-platform GUI apps for multiple targets — mobile, web, and desktop — from a single codebase.

This post will go through how to install the Flutter SDK and tools on Fedora, as well as how to use them both for mobile development and web/desktop development.

Installing Flutter and Android SDKs on Fedora

To get started building apps with Flutter, you need to install

  • the Android SDK;
  • the Flutter SDK itself; and,
  • optionally, an IDE and its Flutter plugins.

Installing the Android SDK

Flutter requires the installation of the Android SDK with the entire Android Studio suite of tools. Google provides a tar.gz archive. The Android Studio executable can be found in the android-studio/bin directory and is called studio.sh. To run it, open a terminal, cd into the aforementioned directory, and then run:

$ ./studio.sh

Installing the Flutter SDK

Before you install Flutter you may want to consider what release channel you want to be on.

The stable channel is least likely to give you a headache if you just want to build a mobile app using mainstream Flutter features.

On the other hand, you may want to use the latest features, especially for desktop and web app development. In that case, you might be better off installing either the latest version of the beta or even the dev channel.

Either way, you can switch between channels after you install using the flutter channel command explained later in the article.

Head over to the official SDK archive page and download the latest installation bundle for the release channel most appropriate for your use case.

The installation bundle is simply a xz-compressed tarball (.tar.xz extension). You can extract it wherever you want, given that you add the flutter/bin subdirectory to the PATH environment variable.

Installing the IDE plugins

To install the plugin for Visual Studio Code, you need to search for Flutter in the Extensions tab. Installing it will also install the Dart plugin.

The same will happen when you install the plugin for Android Studio by opening the Settings, then the Plugins tab and installing the Flutter plugin.

Using the Flutter and Android CLI Tools on Fedora

Now that you’ve installed Flutter, here’s how to use the CLI tool.

Upgrading and Maintaining Your Flutter Installations

The flutter doctor command is used to check whether your installation and related tools are complete and don’t require any further action.

For example, the output you may get from flutter doctor right after installing on Fedora is:

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Linux, locale it_IT.UTF-8)

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)

    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[!] Android Studio (version 3.5)

    ✗ Flutter plugin not installed; this adds Flutter specific functionality.

    ✗ Dart plugin not installed; this adds Dart specific functionality.

[!] Connected device

    ! No devices available

! Doctor found issues in 3 categories.

Of course the issue with the Android toolchain has to be resolved in order to build for Android. Run this command to accept the licenses:

$ flutter doctor --android-licenses

Use the flutter channel command to switch channels after installation. It’s just like switching branches on Git (and that’s actually what it does). You use it in the following way:

$ flutter channel <channel_name>

…where you’d replace <channel_name> with the release channel you want to switch to.

After doing that, or whenever you feel the need to do it, you need to update your installation. You might consider running this every once in a while or when a major update comes out if you follow Flutter news. Run this command:

$ flutter upgrade

Building for Mobile

You can build for Android very easily: the flutter build command supports it by default, and it allows you to build both APKs and newfangled app bundles.

All you need to do is to create a project with flutter create, which will generate some code for an example app and the necessary android and ios folders.

When you’re done coding you can either run:

  • flutter build apk or flutter build appbundle to generate the necessary app files to distribute, or
  • flutter run to run the app on a connected device or emulator directly.

When you run the app on a phone or emulator with flutter run, you can use the R button on the keyboard to use stateful hot reload. This feature updates what’s displayed on the phone or emulator to reflect the changes you’ve made to the code without requiring a full rebuild.

If you input a capital R character to the debug console, you trigger a hot restart. This restart doesn’t preserve state and is necessary for bigger changes to the app.

If you’re using a GUI IDE, you can trigger a hot reload using the bolt icon button and a hot restart with the typical refresh button.

Building for the Desktop

To build apps for the desktop on Fedora, use the flutter-desktop-embedding repository. The flutter create command doesn’t have templates for desktop Linux apps yet. That repository contains examples of desktop apps and files required to build on desktop, as well as examples of plugins for desktop apps.

To build or run apps for Linux, you also need to be on the master release channel and enable Linux desktop app development. To do this, run:

$ flutter config --enable-linux-desktop

After that, you can use flutter run to run the app on your development workstation directly, or run flutter build linux to build a binary file in the build/ directory.

If those commands don’t work, run this command in the project directory to generate the required files to build in the linux/ directory:

$ flutter create .

Building for the Web

Starting with Flutter 1.12, you can build Web apps using Flutter with the mainline codebase, without having to use the flutter_web forked libraries, but you have to be running on the beta channel.

If you are (you can switch to it using flutter channel beta and flutter upgrade as we’ve seen earlier), you need to enable web development by running flutter config –enable-web.

After doing that, you can run flutter run -d web and a local web server will be started from which you can access your app. The command returns the URL at which the server is listening, including the port number.

You can also run flutter build web to build the static website files in the build/ directory.

If those commands don’t work, run this command in the project directory to generate the required files to build in the web/ directory:

$ flutter create .

Packages for Installing Flutter

Other distributions have packages or community repositories to install and update in a more straightforward and intuitive way. However, at the time of writing, no such thing exists for Flutter. If you have experience packaging RPMs for Fedora, consider contributing to this GitHub repository for this COPR package.

The next step is learning Flutter. You can do that in a number of ways:

  • Read the good API reference documentation on the official site
  • Watching some of the introductory video courses available online
  • Read one of the many books out there today. [Check out the author’s bio for a suggestion! — Ed.]

Photo by Randall Ruiz on Unsplash.

FAQs and Guides For Developers Using Software

13 Comments

  1. Rayuko

    Building for the Destkop

  2. 5t5t

    Please write electron tutorial, with generate exec ELF.

    in my opinion on this tutorial must more images

  3. Gordy Campbell

    It is possible to install and develop this in a toolbox on Silverblue?

  4. RNM

    …and make sure you have good /home space

  5. werfwe

    No images for gui program?
    realy?

    • I understand what you’re saying but I didn’t feel it made too much sense given that it’s mostly about the tools and there’s no code.

  6. OppaErich

    Doesn’t work.
    [oppa@oppa-labor ~]$ LANG=C flutter doctor
    bash: flutter: command not found…
    [oppa@oppa-labor ~]$ echo $PATH
    /home/oppa/.local/bin:/home/oppa/bin:/usr/share/Modules/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/sbin:/home/oppa/flutter/bin
    [oppa@oppa-labor ~]$ ls flutter/bin/
    cache flutter.bat

    Why is it flutter.bat? I did download: flutter_linux_v1.12.13+hotfix.5-stable

    • OppaErich

      Hi,
      that was an unpacking problem using Gnome Filemanager. I tried again using tar in CLI and it does work now. I ran demo apps on the android emulator.

      I just don’t know how to compile for desktop. I can’t find a way to select a desktop target in IntelliJ community. When I try to run flutter build linux in the build directory, I get an error:
      [oppa@oppa-labor build]$ flutter build linux
      Error: No pubspec.yaml file found.
      This command should be run from the root of your Flutter project.
      Do not run this command from the root of your git clone of Flutter.
      OK…
      [oppa@oppa-labor build]$ cd ..
      [oppa@oppa-labor startup_namer]$ flutter build linux
      Downloading linux-x64 tools… 6,1s
      Downloading linux-x64 tools… 0,5s
      “build linux” is not currently supported.
      Uh-huh
      [oppa@oppa-labor startup_namer]$ flutter create .
      Recreating project ….
      Wrote 3 files.

      All done!
      [✓] Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.5, on Linux,
      locale de_DE.UTF-8)
      [!] Android toolchain – develop for Android devices: is partially installed;
      more components are available. (Android SDK version 29.0.2)
      [!] Android Studio: is not available. (not installed)
      [✓] IntelliJ IDEA Community Edition: is fully installed. (version 2019.3)
      [!] IntelliJ IDEA Ultimate Edition: is partially installed; more components are
      available. (version 2019.1)
      [!] VS Code: is partially installed; more components are available. (version
      1.41.1)
      [✓] Connected device: is fully installed. (1 available)

      Run “flutter doctor” for information about installing additional components.

      In order to run your application, type:

      $ cd .
      $ flutter run

      Your application code is in ./lib/main.dart.

      [oppa@oppa-labor startup_namer]$ ll
      drwxrwxr-x oppa oppa 4 KB Fri Jan 17 15:08:34 2020  android
      drwxrwxr-x oppa oppa 4 KB Fri Jan 17 15:08:55 2020  build
      drwxrwxr-x oppa oppa 4 KB Fri Jan 17 15:02:14 2020  ios
      drwxrwxr-x oppa oppa 4 KB Fri Jan 17 18:08:06 2020  lib
      .rw-rw-r– oppa oppa 4.4 KB Fri Jan 17 15:20:33 2020  pubspec.lock
      .rw-rw-r– oppa oppa 2.6 KB Fri Jan 17 15:19:29 2020  pubspec.yaml
      .rw-rw-r– oppa oppa 543 B Fri Jan 17 15:02:14 2020  README.md
      .rw-rw-r– oppa oppa 619 B Fri Jan 17 15:02:51 2020  startup_namer.iml
      drwxrwxr-x oppa oppa 4 KB Fri Jan 17 15:02:14 2020  test

      Nope, no Linux directory. flutter run just tries to unstall and run an android app on the connected phone.

      So, is there a guide to building for Desktop for mortals?

      Stephan

      • As I said in the guide, the linux directory can be found in the examples in the flutter-desktop-embedding repository I linked in the article. That’s because the flutter create command doesn’t support desktop platforms currently, so it doesn’t generate those directories. It’s all very experimental right now, Web support seems to be slightly better though, mobile works great.

  7. OppaErich

    Hi,

    I am in this directory:
    [oppa@oppa-labor build]$ pwd
    /home/oppa/Downloads/flutter-desktop-embedding-master/build
    flutter build . does build something. But flutter run tries to run something on the connected android phone from the stone age. It also throws a lot of red error messages. And during build there are messages prefixed with ‘ios/’ and ‘android/’ but nothing else.

    [oppa@oppa-labor build]$ flutter run
    Error 1 retrieving device properties for ro.product.cpu.abi:
    error: insufficient permissions for device
    See [http://developer.android.com/tools/device.html] for more information

    Launching lib/main.dart on 3CDFBD192EB1 in debug mode…
    Unexpected failure from adb: Invalid argument(s): The source must not be null

    This 3C.. is the old android phone.

    • Again, make sure you are on the beta channel (and have ran flutter upgrade after switching) and have enabled linux desktop development with the command you can find in the guide
      I guess the build/ directory you are in is the root of a Flutter project, containing the linux/ directory you can find in the examples in the flutter-desktop-embedding repo (i.e. you copied and pasted the example they give you, only modifying Dart files in lib/)
      I’m assuming you have used commands like flutter run or flutter build previously that have downloaded the Linux build tools, after that you’ll be able to use flutter build linux
      You can make sure Flutter doesn’t try running the app on other devices by running flutter run -d linux
      If the issue persists, you can find my email address on my carminezacc.com website so I can respond quicker there.

Comments are Closed

The opinions expressed on this website are those of each author, not of the author's employer or of Red Hat. Fedora Magazine aspires to publish all content under a Creative Commons license but may not be able to do so in all cases. You are responsible for ensuring that you have the necessary permission to reuse any work on this site. The Fedora logo is a trademark of Red Hat, Inc. Terms and Conditions

%d bloggers like this: