All Articles

Introduction to Flutter

You’re standing at the water cooler and suddenly you have a great idea for a mobile application. After some discussion with colleagues and your inner monologue you get home, open your editor of choice and stare blankly. Why? Because there are a myriad of choices when it comes to how the application is developed.

Native Android or iOS? React Native? Web based with Ionic or perhaps cross platform efforts using NativeScript? Heck, Fuse may also be a great option as you can use the declarative UX language! This just scratches the surface of the options available when creating applications in 2018. How do you know what is best for you?

Trial and error. Be inspired. Try new things… such as Flutter.

Introduction to Flutter

Flutter

Flutter is an open source UI framework developed by Google with the goal of creating native iOS and Android applications using Dart. It supports a variety of expected mobile development features such as hot reloading, device API access, performance profiling, and more.

We’ll start off by installing Flutter on our computer, you’ll be happy to know there is support for Windows, Linux and macOS! I also recommend using Visual Studio Code and the Dart Code extension for the best development results.

Creating a new Flutter project

To create a new Flutter project, run the following in your terminal:

# New Flutter application
$ flutter create demo

# Change directory
$ cd demo

# Open inside of Visual Studio Code
$ code .

If you get an error such as flutter: command not found, you’ll need to ensure that you’re exposing Flutter to your PATH (i.e. export PATH=pwd/flutter/bin:$PATH).

What exactly does this give us? Let’s start our journey at main.dart.

Upon looking at this for the first time it’s easy to feel overwhelmed by the amount of concepts at hand. We can see things like StatelessWidget, StatefulWidget, setState and a variety of other additions. Let’s delete and recreate everything using the minimal amount of code possible.

import 'package:flutter/material.dart';

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

The main function allows us to bootstrap a widget named MyApp (or anything you want), but as we deleted the class we’ll need to remake it:

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return new Text("Hello Flutter", textDirection: TextDirection.ltr);
  }

If you’ve ever used React, JSX or another render based library, you’ll be familiar with the build method with Flutter. This allows us to render our UI elements as a widget tree, which in the context of our application shows “Hello Flutter” on screen.

Run the project on a device

We can see the results of our efforts by running this on iOS or Android. This can be done from within Visual Studio Code by selecting Debug > Start Debugging or by pressing F5.

We can take advantage of hot reloading inside of Code by hitting the green refresh button. Alternatively, you can run the application by typing flutter run inside of your terminal.

Here’s the results:

Showing text inside of a Flutter application

Evidently, this still needs some work as the text is on the top left (0,0) of our device. Thankfully, Flutter provides us with lots of ways to style our application.

Flutter Styling

To center the text both horizontally and vertically on our screen, we can use the Center widget. We have to pass another widget as a child, which will be the Text we created earlier:

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return new Center(
        child: new Text("Hello Flutter", textDirection: TextDirection.ltr));
  }
}

Centered text within Flutter

Great! Although I would prefer if we could make the text a little larger, and perhaps even bold. We can modify our Text widget like so:

Widget build(BuildContext context) {
  return new Center(
      child: new Text(
    "Hello Flutter",
    textDirection: TextDirection.ltr,
    style: new TextStyle(fontSize: 48.0, fontWeight: FontWeight.bold),
  ));
}

Modifying text style with Flutter

Widget Extraction

I like our text widget and we’ll soon want to extend our application to include more items. In order to keep things clean and maintainable, we should extract the data into it’s own Widget like so:

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return new HelloWorldText();
  }
}

class HelloWorldText extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return new Center(
        child: new Text(
      "Hello Flutter",
      textDirection: TextDirection.ltr,
      style: new TextStyle(fontSize: 48.0, fontWeight: FontWeight.bold),
    ));
  }
}

We’re now creating a new HelloWorldText which renders the same widget tree as before, but it’s now much easier to manage.

MaterialApp and Scaffold

We’ve made some great progress… but something feels odd. Android and iOS applications usually have a NavBar, StatusBar and other concepts. We can implement these inside of our Flutter application easily using MaterialApp and Scaffold.

MaterialApp gives us access to a wide variety of widgets that form our user interface. We can extend our MyApp class to return a new MaterialApp which sets the HelloWorldText widget as the home page.

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'My First Flutter App',
        home: new HelloWorldText());
  }
}

If you look at the application at this point, you’ll notice that our text has gone red with yellow underlines. This is because we’re returning a new Center and not a Scaffold.

The Scaffold provides us with the basic Material Design infrastructure such as the navigation bar, drawer, floating action buttons, and so on. Let’s create a new widget named HomePage which we can use to display this.

class HomePage extends StatelessWidget {
  final String title;

  HomePage({this.title});

  
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text(this.title)),
      body: new HelloWorldText(),
    );
  }
}

Our HomePage widget now accepts a page title which we’re using to return a new Scaffold containing the appBar and appropriately setting the title. Inside of the body of the scaffold (i.e. under the appBar), we’re displaying the HelloWorldText widget we created earlier.

The final step is to upgrade our MyApp widget to contain the MaterialApp which bootstraps the HomePage:

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'My First Flutter App',
        home: new HomePage(
          title: 'Home Page',
        ));
  }
}

Flutter application with navigation bar and body

Tada! We’re off to a great start. The source code for this project can be found here: https://github.com/PaulHalliday/introduction-to-flutter.

Published 7 Apr 2018

Learn to create cross platform native applications with the Flutter UI Framework.
Paul Halliday on Twitter