Flutter: Hello world!

Coming from an Android development background using Java and Kotlin, getting accustomed to the syntax of Dart and using Flutter took me no time. My first experiences playing around with them were actually quite a delight. hopefully this article will gear you up to start your Flutter journey.

“Hello world!” on an Android emulator and iOS simulator

Getting ready for the road trip

Installing and running Flutter couldn’t have been more straightforward. The official docs will get you through that. Once you’re done you can run the following command to make sure you’re all set.

$ flutter doctor

For example, on my computer I get the following output:

[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.12.6 16G1212)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.2)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
[✓] Android Studio (version 3.0)
[✓] IntelliJ IDEA Community Edition (version 2017.1.3)
[✓] Connected devices (2 available)

Note that not all checks are necessary to create and run a Flutter project, for example if you have both Android Studio and IntelliJ IDEA, but only have the Flutter and Dart plugins on Android Studio, as long as you use Android Studio for any Flutter related coding you can just ignore the IntelliJ IDEA warning you’ll get in the summary.

Here we go!

From your terminal, navigate to where you’d like to create the project and run:

$ flutter create flutter_hello_world

On a side note, the project name must only use basic Latin letters, digits and underscore [a-z0–9_], you’ll get an error if you do otherwise.

Once the project is created, it should have the following structure:

flutter_hello_world
  android
  ios
  lib
    main.dart
  test

Creating a Hello World app will require working with only 1 file: main.dart. For the purposes of this article, empty the whole file and replace it with the following code.

Let’s go through this code step by step.

import 'package:flutter/material.dart';

In Flutter almost everything is a widget, widgets are the building blocks of Flutter apps, and luckily a variety of widgets are offered by Flutter: Buttons, input fields, lists, tables, dialogs, tab bars, card views, … You name it! Here we’re importing the library material.dart containing a rich set of material widgets that implement the material design guidelines.

void main() => runApp(new HelloWorldApp());

The main function is the entry point to the app, it calls the runApp method which inflates the screen with the widget it takes as a parameter, this widget in the root widget.

class HelloWorldApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        ...
    }
}

Widgets you’ll be using to build your app can either be stateful or stateless. A stateful widget is one that has a mutable state describing it, think of a checked/unchecked check box , a selected/unselected radio button, a text input field’s text, a slider’s value… This type of widget must implement the createState() method.

On the other hand, a stateless widget is one that has no internal state, think of an image or a text field. This type of widget must implement the build() method.

In our case we’ll only be displaying “Hello world” on the screen the entire time, our widget is stateless.

new MaterialApp(home: ...)
new Material(child: ...)
new Center(child: ...)
new Text(...)

MaterialApp (a material design widgets wrapper), Material (a piece of “material”), Center (a widget that centers elements inside it) and Text (a text field widget) are a few of the many widgets offered by Flutter. Each widget has a set of attributes (some mandatory, others optional) that describe composition (home, child, children), visual aspects (decoration, position, styling) and behavior(on click listener). As you spend more time building with Flutter, you’ll get to experiment with more widgets and you’ll run into more use cases where you’ll need to implement other attributes.

Run!

You have a couple of options when it comes to running your app, I prefer using the command line. Depending on whether you have only 1 or multiple connected devices, and if you want to run your app on a specific device or all of them, run one of the following:

$ flutter run
$ flutter run -d DEVICE_ID
$ flutter run -d all

For more on Java, Kotlin and Android, follow me to get notified when I write new posts, or let’s connect on Github and Twitter!