By now you’ve heard about Flutter. As a developer, it’s almost impossible to beat rush you get from learning a new technology; especially one on that makes claims like Flutter:

  • Native Performance
  • Easy to learn
  • Build beautiful cross-platform apps

In this tutorial series we will be walking through several of the widgets that belong to the Material Components catalog. At the end of the series we will walk-through an entire application, from start to finish. Our goal is to evaluate the claims made by Flutter and learn a thing or two along the way.

Today we will create our very first Flutter app, based on the default Flutter application, and we will run it on either an iOS or Android Emulator. Here’s a preview:

Final Flutter Preview
Preview of final application

Requirements to code along:

Creating your first Flutter App

Create a new Project

To get started, open Intellij and press “Create New Project”. This will open a prompt that asks you fill in the information about the new project; let’s call our project firstapp, then press “Finish”.

Once you press “Finish”, the IDE will open your new project. Now, in the project pane on the lefthand side of the screen you can see that a new project has been created and many files have been pre-populated.

The actually application lives in <projectDirectory>/firstapp/lib/main.dart

Open main.dart and you will see the sample application which the Flutter plugin as supplied. Just to make sure everything is working as it should, we will run the demo application.

Running the demo

Before you fly off and press the big green play button, you must first open an Emulator. In this tutorial I’ve picked the iOS Simulator, feel free to choose Android if you have one configured.

Once your emulator of choice is open, press the play button!

Default App Preview

Notice that this is very very very similar to the final application preview at the top of this page, however, we are going to make one small edit before we move on.

Leave the app running, we’re going to try the Hot-Reload feature of Flutter. When we make a change in the main.dart file, once we save, the changes should become visible on the emulator without restarting our app!

Tweaking main.dart

Scroll to the bottom of the file and look for the “floatingActionButton” definition. We’re going to change the child property of the FloatingActionButton widget to “Icons.plus_one”.

Minor change to the project

Watch the Run pane in your IDE while you save main.dart. You should notice that the Hot-Reload started, after only a few milliseconds it’s re-loaded your application. Now look at the emulator!

Final Flutter Preview
Final App Preview

That’s it! Congratulations on making it all the way through this tutorial and creating your very first Flutter application! If you liked this tutorial, please consider sharing it with your peers and checking out my series on Kotlin 🙂