Creating an application

Learning objectives

You know how to create a new Flutter application.
You know how to run a Flutter application locally.

New Flutter project

The Flutter plugin provides an easy approach for creating a template Flutter project. Choose View and click Command Palette. Write flutter and choose Flutter: New Project from the available options.

7 vscode flutter new project — The text 'flutter' has been written to the command palette.

When you choose Flutter: New Project, you see a question on which template to use. Choose Application.

7 vscode flutter new app — VSCode asking which Flutter template to use.

When you choose Flutter: Application, VSCode creates a new project based on the template. The environment first asks for a folder for the project -- pick a suitable one from your computer.

After this, the environment asks for a name for the application. In the example below, we have typed sovellukseni, which means my application in Finnish.

7 vscode flutter new app sovellukseni — Creating a new application with the name 'sovellukseni'.

This leads to VSCode creating a new project to the chosen folder. On the left hand side of VSCode, you will also see an area with the relevant project data. As you notice, there are plenty of files and folders.

For now, the relevant folder is lib, which contains the sources for the new project. Open up the file main.dart in the folder lib by clicking it.

7 vscode flutter sovellukseni valmis — New application created and the 'main.dart' file has been opened.

Command line

With Flutter installed, you may alternatively use the flutter create command to create a new project on the command line.

Running the application

You can start the application by pressing the button f5 or clicking the file main.dart with the right mouse button and choosing Run Without Debugging. Alternatively, you could press the play and bug icon on the left hand side and then, press Run and Debug.

Note, for developing the application in a browser, check that the lower right corner of VSCode has the text "Chrome (web-javascript)" or similar. Clicking this allows selecting other options for deploying the application.

Note that starting the application can take quite a while.

7 vscode flutter run and debug — You can start the application e.g. with 'Run and Debug'. Starting up the application can take a while.

If things are in order, a Flutter application opens up in a browser window. Below, the window is partially behind VS Code.

7 vscode flutter app running — The application is running and you can see it in the browser.

Hot reload

VSCode also has a "hot reload" functionality that allows reloading changes to the application during development time rapidly. Try this out by changing the title in the main.dart to Sovellukseni and save the file (Ctrl+s tai File->Save).

7 vscode flutter sovellukseni — Title is being changed to 'Sovellukseni'.

When the application has been saved, the title for the running application should change to Sovellukseni. In the figure below, you see the updated title in the browser tab.