This tutorial will go through everything you need to run your first application with Flutter.

Before running through this Tutorial you should have your development environment already setup. You can do it by following our step by step instructions on How to Install Flutter on Mac OS.

Before starting double check that the SDK and simulators/emulators are correctly installed and setup by running flutter doctor.

For this Tutorial we are going to use Visual Studio Code. You can do everything also do with Android Studio or other editors if you prefer them instead. Whenever we use a command palette command in Visual Studio Code you can use the Terminal and navigate to your project directory to run the same command.

We are going to augment the basic default autogenerated Flutter by displaying the time when you click on the button on top of incrementing the counter.

Flutter App 1

Open VSCode, and invoke the command palette ( ⌘ ⇧ P) and type “Flutter New Project”. VSCode will let you select a folder where you want to save your new Flutter project.

Alternatively you can open the Terminal and run

flutter create myapp

Both will create a new flutter application in your current directory (or let you pick a folder if you’re using VSCode). It will fetch all of the dependencies and set up the environment.

Wait until it finishes creating everything and run the application by switching to the Debug panel ( ⌘ 4 ) and Pressing Run (the green arrow). Select Dart And Flutter. VSCode will ask you if you want to use the iOS Simulator or the Android Emulator, try the Android Emulator for now.

Push the button to increment the counter.

Go back to VSCode and open the Explorer ( ⌘ 1 ). Navigate to libs and open “main.dart”. This file is the entry point of your application, it’s the first class the runs after the application launches.

Change the line

      home: MyHomePage(title: 'Flutter Demo Home Page'),

To

      home: MyHomePage(title: 'Flutter Demo'),

And save the file. Leave the app open. In just a moment you will see your change already loaded in the emulator.

Scroll down and inside _MyHomePageState edit _incrementCounter

 void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter += 2;
    });
  }

Each time we press the button the counter will now increase by 2.

Add now a new Text element under the counter. Inside _MyHomePageState edit Widget build(BuildContext context) from

mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),

To

mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            Text(
              'Last Updated:',
            ),
          ],
        ),
      ),

And again without rebuilding Flutter added the new label.

We’re now going to do something more complicated, actually showing the date of the last update. To do it we need to:

  1. Import the date package (that is not included in the base installation).
  2. Define a new stateful variable of dateUpdate to store the date of the last update each time we tap the button.
  3. Update the date on each tap
  4. Format the data for display
  5. Show the updated date

Start by opening “pubspec.yaml”. Here we will declare the package “intl” as a dependency.

Scroll down to “dependencies” and add

dependencies:
  flutter:
    sdk: flutter
  intl://<--add

If you’re using VSCode the project should update automatically. Otherwise run flutter packages get in the Terminal.

Go back to “main.dart” and import the dependency at the top of the file.

import 'package:intl/intl.dart';

Time to add the dateUpdate variable. Go to _MyHomePageState and under the variable counter add

int _counter = 0;
var _dateUpdate = DateTime.now();//<-add

We initializate it to the current date when we load.

Inside _incrementCounter set the current date. _incrementCounter is called each time we tap the counter so we want to save there the current date right when we increment the counter.

void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter += 2;
      _dateUpdate = DateTime.now();
    });
  }

The next 2 steps can be done when we display the data. Go to the Text element and add

children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            Text(
              'Last Updated: ${new DateFormat.yMd().add_jm().format(_dateUpdate)}',
            ),
          ],

We update the new text element with our saved date. We create a new Formatter object and set it to show a complete date (you can find more information on how to format date in the documentation) passing in the _dateUpdate variable. We use ”${}” to execute a function in line and embed the result in the output string.

Flutter App 2

Save and press the button to update the saved date.

Recap

Let’s recap what you did!

  • You’ve created your first Flutter Application.
  • You’ve seen how we change state in a Flutter Application.
  • You’ve seen how to integrate and import dependencies.
  • You’ve seen how to format dates in readable strings.

You can take a look and download the complete project on Github.

Ready for something more advanced? We’ve published a Tutorial on how to create your own minimal Markdown Editor with Flutter.