Setting up an emulator

Emulator is a program that allows emulating programs in an environment that resembles the real environment. As an example, using an emulator for a specific device such as a given Android phone, one could verify the behavior and the way how the application looks like in a near authentic environment. When building, for example, mobile applications, emulators are used to check that this work as expected.

Note that you may proceed without setting up an emulator. We are mostly working with packages that can be run without an emulator. For Flutter development in practice, an emulator is a good addition to the available toolset.

Here, we briefly look into taking an Android-emulator into use. Below, we have provided links for setting up an Android emulator for different operating systems.

• Android emulator for Windows
• Android emulator for macOS
• Android emulator for Linux

When the Android emulator has been installed, you can restart Visual Studio Code. When Visual Studio Code has been restarted and you've reopened a Flutter project, you'll see a menu on the lower right corner where you can select the environment in which you wish to run the application.

By clicking the area, you'll see a set of options; now, there should also be the option of creating an Android emulator. In the figure below, we have created a Pixel 2 API 30 emulator.

When you click on an emulator, the emulator starts up.

When you start up the emulator, it opens up as a separate program (similar to what we have seen when working with e.g. a browser). In the image below, the emulator is running in the background.

Now, when the emulator is running, when we run our program (e.g. by clicking main.dart and choosing "Run Without Debugging"), the program will launch in the emulator.

When you try out the following program in the emulator, you'll notice something interesting.

import 'package:flutter/material.dart';

main() async {
  runApp(MaterialApp(home: Scaffold(body: Text('Sum: 42'))));
}

The text is shown in the application as expected, but it is actually under the small bar of the phone that is used to show e.g. the time of day.

With the utilities that we just looked into, this is easily fixable. The SafeArea modifies the application so that contents shown in the application are outside of areas reserved by device.

When we add the SafeArea to the above application, things work nicely.

import 'package:flutter/material.dart';

main() async {
  runApp(MaterialApp(home: SafeArea(child: Scaffold(body: Text('Sum: 42')))));
}