How to Make Your First Linux App With Flutter

Many popular apps, such as Adobe Photoshop, Microsoft Office, and WhatsApp, don’t have Linux desktop counterparts. However, thanks to cross-platform application development platforms like Electron, Flutter and Tauri, the number of Linux apps is on the rise.

If you’re interested in trying your hand at development, this tutorial shows you how to make a very simple app using Flutter and could prove helpful for those who want to figure out how to create apps for Linux and get some programming experience.

Also read: 7 Best Apps to View Disk Usage in Linux

Why Linux Needs More Apps

Linux has a smaller desktop user base compared to Windows and Mac, which is one of the reasons application developers are reluctant to publish their apps on Linux. Unfortunately, the scarcity of popular apps compatible with Linux affects adoption by the general population, thus creating a vicious cycle. It doesn’t help that Linux is often considered an alternative for more tech-savvy individuals.

To change this narrative, the Linux community needs to focus on porting more utility-focused apps to its ecosystem. With and increasing user-base, major developers will finally be encouraged to launch their applications on Linux. If you’d like to be part of this effort, Flutter is a great way to start your Linux app development journey.

What Is Flutter?

Flutter is a cross-platform application development framework by Google that uses Dart, an object-oriented programming language. Flutter’s biggest advantage is that it allows developers to build natively compiled applications for mobile, Web, and desktop from a single codebase.

Currently, Flutter supports all desktop platforms, including Windows, Mac, and Linux, as well as Android and iOS on mobile. Flutter doesn’t use platform-specific UI elements and instead implements a blank canvas with added widgets. Therefore, Flutter is called a declarative framework.

Why Choose Flutter for Your Linux App Development?

Flutter is very fast compared to alternatives like Electron. The latter uses web technologies to build desktop apps and bundles a Chromium engine to get consistent performance on all desktop platforms. Therefore, apps developed on the platform are very heavy and consume more RAM.

Flutter takes a different approach, compiling the Dart source code into platform-specific C/C++ bundles. The resulting apps are considerably lighter than Electron apps, which means they’re also more performant and consume fewer resources.

Flutter comes with support for the latest Gnome Libadwaita style widgets and allows developers to customize their applications using Ubuntu’s Yaru theme. Moreover, Canonical has published various easy-to-use packages to help users build Linux apps efficiently and without digging too much into the Linux system APIs.

Also read: The Best Open Source Tools to Secure Your Linux Server

1. Installing Flutter on Your Machine

Described below are three ways to install Flutter on your Linux desktop.

Install Flutter Using Snap

Before installing Flutter via Snap, you should have Snap installed on your computer. Snap is part of Ubuntu distributions, but you can easily install it in other desktop environments too.

If you are using a Debian-based distribution, first install “snapd” using your package manager.

sudo apt update
sudo apt install snapd

Restart your device to ensure all Snaps paths are correctly set up. To get the latest version of “snapd,” install the core Snap package.

sudo snap install core

For Fedora or Red Hat-based Linux distributions, you can use the DNF package manager to install “snapd.”

sudo dnf install snapd

Flutter is a classic Snap, so it behaves as a traditionally installed system. It has full access to your system as opposed to normal Snaps, which are confined to a sandbox environment. To enable classic Snap in Fedora, run the following command.

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

Once Snap is onboard your computer, install Flutter with Snap.

sudo snap install flutter --classic

Run the flutter doctor -v command to see if everything is set up on your device. If that’s not the case, the Flutter CLI (Command Line Interface) gives you the proper instructions to set up all of the required components to develop Linux apps on your device.

Also read: How to Transcode FLAC Files With flac2all in Linux

Install Flutter Manually

If you don’t want to use Snap, you can download the latest Flutter stable release from the official website and install it manually from there. Alternatively, run the wget command to download Flutter directly without leaving your Terminal.

You’ll need to substitute version 3.3.2 with the latest Flutter stable version using this command:

wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.2-stable.tar.xz

Then extract the files into the current directory.

tar xf ~/Downloads/flutter_linux_3.3.2-stable.tar.xz

Copy the extracted Flutter directory to your Home folder and set the Flutter binary path in your bash environment.

cp flutter/ ~ 
export PATH="$PATH:`pwd`/flutter/bin"

Run the flutter doctor -v command to see whether Flutter is successfully installed. If you want to set the Flutter environment variables permanently and make Flutter commands accessible in your environment, set the Flutter environment variable in your “.rc” file.

If you’re using the bash shell, open your “.bashrc” file and paste the following line of code at the end of it.

export PATH="$PATH:[PATH_OF_FLUTTER_DIRECTORY]/bin"

Note: change the [PATH_OF_FLUTTER_DIRECTORY] to your own Flutter directory path.

Hit save and source your “.bashrc” file or use a new Terminal window to refresh your environment variables present in the “.bashrc” file.

source .bashrc

Finally, run the flutter doctor -v command again to see whether all the Flutter components are properly installed on your device. Alternatively, follow the Terminal outputs to install all required Flutter libraries.

Also read: Why You Should Use Timeshift to Back Up Your Computer

Install Using Git

Installing Flutter using Git is similar to the above processes. The primary difference is, instead of downloading a particular Flutter version, you can switch the Flutter version by simply adding a Terminal argument.

It’s possible to install Git using your package manager.

sudo apt update
sudo apt install git

Clone the GitHub repository to the current working directory. You should use your home directory rather than a random directory.

cd ~
git clone https://github.com/flutter/flutter.git

The above command cloned the master branch of the GitHub repository. If you want to switch it to the stable branch, add a -b flag to the git clone command.

git clone https://github.com/flutter/flutter.git -b stable

Add the Flutter path to your “.bashrc” file to finish the Flutter installation.

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

2. Generating a Flutter Project

If you just started working on the project and haven’t written much code yet, creating a project with a new package name (unique identifier) is the cleanest solution. Each Flutter app has a package name that uniquely identifies your app, and you can set it using the flutter create command.

If you have a domain name called “example.com,” then your package name should be “com.example projectname“. You can set this package name using a --org flag in the flutter create command.

flutter create --org com.example counter

This will create a new Flutter project in the current directory where the project name is “counter” and the package name is “com.example.counter.”

When you create a Flutter app, the “main.dart” file found in your project’s “counter/lib” folder will be populated with a demo application (its code can be modified, as shown below), which you can run immediately!

Also read: 4 Ways to Increase the Battery Life of Your Linux Laptop

3. Running Your First Flutter Application

After generating your Flutter project, open the project directory in your favorite code editor. For instance, if you’re using Visual Studio Code, run code counter in the Terminal to open your project directory (“counter” in our case) in VSCode.

Use the CTRL + ` command to open a Terminal inside the editor, which you’ll use to run your first Flutter application by typing:

flutter run -d linux

If you’ve done everything correctly, you should be running your Linux application on your desktop. It’s a simple app that lets you press a “+” (Add) to increase the centrally-placed counter.

Also read: How to Restart a Frozen Desktop in Linux

Basic Concepts of Flutter Apps

Before starting to edit parts of this demo code, you will need to understand a few concepts that are unique to Flutter. Open the “counter/lib/main.dart” file in your code editor to observe a couple of aspects:

void main() {
  runApp(const MyApp());
}

• main() – this is a function that represents the starting point of the application.
• MyApp() – this is a Flutter widget. Think of widgets as basic building blocks of Flutter. They come in two flavors: Stateless and Stateful.

1. Stateless Widgets in Flutter

Stateless widgets are basic widgets, which contain other widgets and can’t be altered once they are built. As the name suggests, Stateless widgets don’t have any state on their own. MyApp() is an example of a Stateless widget. It contains the MaterialApp() widget but doesn’t have any reactivity, as it’s visible in the code itself:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

2. Stateful Widgets in Flutter

In contrast, Stateful widgets can be altered once they are built. In the demo app, you’ve seen a “counter” value change as we pressed the button. This is achieved through the use of Stateful widgets, as seen in the code where:

• MyHomePage is a Stateful widget.
• Inside _MyHomePageState class, notice the variable named _counter, which is initialy set to 0.
• Clicking the button in the demo will cause the _incrementCounter() function to run and increase the value by 1.
• The setState() function inside _incrementCounter() re-renders the MyHomePage widget, and an updated _counter value gets displayed on the screen.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
 
  final String title;
 
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
 
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Customizing Your App

Inside the MyApp widget, you can, for example, change the title string from “Flutter Demo Home Page” to “Make Tech Easier”:

home: const MyHomePage(title: 'Make Tech Easier'),

You can also change the application theme using the primarySwatch property of the MaterialApp widget. By default, you get a blue color theme. To change this color to green, just replace “Colors.blue” to “Colors.green”:

primarySwatch: Colors.green,

To see the changes, go to your Terminal and hit r on your keyboard to hot reload the application. You can instantly see that the application color and title are changed.

This is a very basic tutorial to give you an idea of how Flutter works and how you can get started with Linux app development by using it. If you are interested and want to learn more, follow this getting started guide from the Flutter website.

Also read: How to Hide the Top Bar and Side Panel in Ubuntu

Frequently Asked Questions

Image credit: Carl Heyerdahl via Unsplash. All screenshots by Hrishikesh Pathak

Hrishikesh Pathak

Developer and writer. Write about linux and web.