How To Get Started with Your First Flutter App

Introduction

Flutter is an Open Source framework created by Google that focuses on the creation of cross-platform applications. Flutter primarily targets iOS and Android, but is increasingly adding support for desktop platforms, too.

In this article, you will create your first Flutter application and explore the generated code.

Prerequisites

To complete this tutorial, you will need:

• To download and install Flutter.
• To download and install Android Studio or Visual Studio Code. Android Studio offers an integrated, feature-rich IDE with support for Flutter. Visual Studio Code offers more lightweight, but functional support.
• It is recommended to install plugins for your code editor:
  • Flutter and Dart plugins installed for Android Studio.
  • Flutter extension installed for Visual Studio Code.

This article was originally written using Flutter 1.2.x. It has been updated to support Flutter 1.22.2.

Step 1 — Creating a New Flutter Project

Once you have installed Flutter and have the appropriate dependencies (Android SDK or XCode depending on your machine) installed, you can now create a new Flutter project.

First, open your terminal window, navigate to the directory where you want to start your project, and run the following command:

flutter create hello_flutter

Next, change into the project directory:

cd hello_flutter

Then, open this project with your code editor of choice.

Step 2 — Launching the Project

Consult the documentation for running the code in Visual Studio Code or Android Studio.

For example, with Visual Studio Code, open the Run and Debug:

Then, select Dart & Flutter from the dropdown and then choose the hello_flutter configuration. Specify the simulator (either web, iOS, or Android) in the status bar. And run the application by pressing Start Debugging (that resembles a “Play button”).

You will then observe the demo application in the simulator or browser:

Android Studio will require you to specify a Device and select a configuration.

Step 3 — Exploring the Code

You’ve created your first Flutter application! And ran it in an emulator! In this section, you will read some of the code.

Now, open lib/main.dart in your code editor.

MyApp

The first part of the file defines MyApp. This class extends StatelessWidget:

import 'package:flutter/material.dart';

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

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

// ...

We’re firstly importing the Material package from Flutter. This is what gives our application the Material Design look and subsequent access to Material style widgets and functionality.

Then, we’re registering the MyApp widget as the main widget for our application using the runApp method.

Inside of MyApp, we’re returning a build method of type Widget which returns a MaterialApp. The MaterialApp holds metadata such as current ThemeData, the application title, the current home route, and so on.

MyHomePage

The next part of the file defines MyHomePage. This class extends StatefulWidget:

// ...

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

// ...

The last part of this file defines _MyHomePageState. This class extends State for that widget and the build method. If you’ve ever used React before, this is similar to the render method of JSX.

One of the more important things to consider with the above example is the fact that we’re overriding the createState method to provide our own way of managing state:

// ...

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>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

The _counter state can therefore be changed with setState(). Next, we define the build method which creates a Scaffold for our application that contains an appBar and a body.

The Scaffold class can be thought of as a top-level container when using MaterialApp. This allows us to easily add navigation bars, floating action buttons, drawers, avoid notches, and much more.

Whenever we call setState(), the widget’s build method is also called, thus, updating the view and redrawing with the new state. In our example, you can see that we’re making this call to setState within the FloatingActionButton via the onPressed: _incrementCounter function.

Conclusion

In this article, you created your first Flutter application and explored the generated code.

Take the opportunity to experiment with the application and change values for the counter and text.

Continue your learning, by checking out our Flutter topic page for exercises and programming projects.