Activity 3 – Your First Flutter App

Exercise: Creating a new Flutter app in Visual Studio Code

In this exercise you create and run a Flutter app via Visual Studio Code.

1. Creating the Flutter App

Open VSCode and invoke the command palette via View Command

Palette… or Ctrl + Shift + P. Select Flutter: New Application Project.

Use flutterui as name for your project.

Select a folder where the project should be saved. VSCode creates the new

Flutter app and opens a new instance for the project location.

Your explorer on the left should look similar to this:

If the project is not automatically created, make sure

the Dart and Flutter extensions are installed and enabled.

2. Ensure you have a device available

On the right side of the status bar at the bottom of VSCode you see multiple

information about your development environment. One of these indicators

shows the current status of the target device (or emulator):

If no device is currently available you can click on the No Devices button.

A pop up opens that lets you choose which device you want to develop on.

The list contains the emulators as well as any real device you have configured

for development.

Choose one of the listed devices. If the target device is an emulator wait for it

to fully start.

3. Run the application

Select Debug Start debugging (or use the F5) shortcut to build, deploy and

start the application.

Depending on your Internet connection and host device speed the initial build

could take several minutes. You can see the current step/progress in the built-

in DEBUG CONSOLE of VSCode. If it did not open automatically, you can

open it using the command Debug: Focus on Debug Console View

After the build process finished the app appears on your target device:
Tap 3 times on the + in the bottom right.

Now search for the primarySwatch color setting in the source code and switch

the color to yellow. Notice how the number of times you clicked the button

stayed the same but the color changed. This a feature of the Flutter toolkit

that allows state to be persisted between hot reloads.

You can trigger a hot reload manually by using the respective button in the

debug toolkit at the top of you VSCode instance:

4. Review the code

Have a look at the generated code. Press the Control key and click on the

Scaffold widget. This jumps into the Dart source code and allows you to

review the documentation of this class.

5. Test hot reload by changing the styling of the

application

In the ThemeData of you main.dart file change Colors.blue to Colors.red.

Save and see that the emulator switches the color immediately while it

preseves its state (the count).