Big Flap

Google's software product Flutter [1] is not the first attempt to unify mobile app development. Competitors like Microsoft's Xamarin or Facebook's React Native already offer solutions in the same vein. However, Flutter impresses with excellent documentation, great performance, and the ability to generate apps for Linux, macOS, Windows, and the web on top of Android.

In combination with the free Android Studio development environment, apps for all these platforms can be developed comfortably and easily. The website [2] also offers developers a place to find packages that can be sorted on a number of criteria for every conceivable purpose to extend their Flutter apps with desired feature sets.

At first glance, the need to learn a new language for Flutter, the integrated Dart programming language, seems to be an obstacle. However, if you are already familiar with another object-oriented language such as Java, JavaScript, or C#, you will quickly feel at home, because the syntax of these languages is similar.

Installation

Only a few steps install the new open source framework on your computer. The easiest way to set up Flutter is with Snap:

$ sudo snap install flutter --classic

The project's website explains the Linux process [3] in more detail. To check which components need to be installed and to update the framework to the latest version, enter:

flutter doctor -v
flutter upgrade

The recommended development environment is Android Studio, which also comes from Google and is based on the IntelliJ IDEA integrated development environment (IDE) by JetBrains. The latest version can be downloaded free of charge [4]. After installing the IDE, you will need to install the plugins for Flutter and Dart, which you will find under Plugins on the welcome screen. Installing the Flutter plugin also installs the plugin for the Dart programming language.

Getting Started

To create a new Flutter project in Android Studio, select File | New | New Flutter Project , which creates numerous directories and files. For now, only two are of interest: the lib/main.dart file, which contains the Dart source code, and the pubspec.yaml configuration file, which stores metadata such as the required external packages (also known as pubs) and resides in the root directory of the project. The main.dart file is executed as soon as you start the project; however, you first need to delete the sample code it contains.

Following a time-honored tradition, the first small app created simply writes Hello world . The code for this from the main.dart file is shown in Listing 1. The first line imports the flutter/material.dart package, which is a library of widgets in Google Material Design [5]. Because it is one of Flutter's standard libraries, you do not have to install it retroactively. Alternatively, some Cupertino-style widgets mimic the look of a native iOS app. However, I will stick with Material Design here.

01 import 'package:flutter/material.dart';
02
03 void main() {
04   runApp(HelloWorldApp());
05 }
06
07 class HelloWorldApp extends StatelessWidget {
08   @override
09   Widget build(BuildContext context) {
10     return MaterialApp(
11       title: 'Hello World',
12       home: Scaffold(
13         appBar: AppBar(
14           title: Text('Hello World'),
15         ),
16         body: Center(
17           child: Text('Hello World'),
18         ),
19       ),
20     );
21   }
22 }

The source code of an app in Flutter is structured much like the tree structure of an HTML document, with various nested nodes that can have multiple ends. A node corresponds to a widget; in the context of Flutter, this structure is also referred to as a widget tree. Flutter follows the credo of "everything is a widget," which means that all graphical elements of a Flutter app are widgets.

The third line is where the app's main function jumps in. In this example, the runApp() function calls the HelloWorldApp class, the root of the widget tree. Starting in line 7, you have the class declaration and definition. The class inherits the functionality of the StatelessWidget class thanks to extends. As the name implies, StatelessWidget performs state changes. In this example, it simply displays text. The opposite would be StatefulWidget, which can change its state in the user interface (UI).

The abstract build method in line 9, which is overwritten, builds the UI with the widgets. The BuildContext argument doesn't matter for now: You can simply ignore it for the time being. Inside the build method, a MaterialApp is returned describing the UI. The first parameter, title, specifies the title of the app window. The Scaffold under the home item declares an AppBar in line 13; it is assigned the 'Hello World' title as a parameter.

The body section contains the content of the app, much like an HTML document. In this example, it just consists of the Center widget that centers all the content and contains a text widget with the 'Hello World' string. You can see the results in Figure 1.

Figure 1: The finished Hello World app.

Configuration File

The pubspec.yaml configuration file is one of the key elements of a Flutter app. Integrating a package always follows the same pattern. Once you have found a suitable package in the repository [2], check the Installing item to find out how to install it.

First, add the package to the dependencies section, either at the command line by typing

flutter pub add <Package>

or manually in Android Studio. Then, switch back to the main.dart file in Android Studio. The development environment automatically detects that the pubspec.yaml file has been modified and suggests the Get dependencies command at the top of the screen. When you click on the link, the IDE downloads and installs the package; then, you need to add the package to your project with an import statement in the main.dart file.