Get unlimited access to all of programming knowledges for less than 30 min
Chapter 2 Setting Up Your Computer for Mobile App Development

Chapter 2

Setting Up Your Computer for Mobile App Development


check Installing Dart and Flutter

check Installing a development environment

check Mimicking mobile devices on your laptop computer

Archimedes lived in ancient Greece during the second century BCE. His work in the early development of mathematics was groundbreaking. In the peace and quiet of his own bathtub, he chanced upon an important formula — a formula to describe the relationship between his weight and the amount of water his body displaced. Upon making this discovery, he yelled “Eureka!” and jumped out of the tub to tell everyone in his city. Tunic or no tunic, Archimedes wanted all Greeks to share in his joy.

Jump forward roughly 2200 years. I’m 12 years old. In a conversation about moving some furniture, my father quotes Archimedes: “Give me a big enough lever, and I can move the world.” I try to picture this. Here’s Earth, hanging out in space, and there’s a long, long stick with a curl at the bottom. The curl reaches under the big planet and nudges it to a new position.

Stinker that I was, I saw three problems with this scenario. First, how would you anchor the bottom of the lever at a fixed point in empty space? Second, how would you keep the lever from digging an enormous hole into some soft part of the Earth? And finally, how would the people of Earth take to having their planet knocked out of orbit? As you can see, I was an ornery kid.

But the idea of leverage stuck in my mind. The longer the lever, the more benefit you get from it. You can’t lift a big boulder on your own without a lever, but you can move the boulder with a humongous lever. A lever is a tool, and tools are wonderful things.

Tools don’t directly do the things you want done. You can’t eat a tool, read a good tool, hear a tool’s happy song, or dance the jig with a tool. But you can use tools to make food, books, musical instruments, and dance floors.

This chapter is all about tools — the tools you use to make great mobile apps.

The Stuff You Need

This book tells you how to create apps using Flutter. Before you can create apps, you need some software tools. Here’s a list of the tools you need:

  • The Flutter Software Development Kit (SDK)

    The Flutter SDK includes lots and lots of prewritten, reusable Flutter code and a bunch of software tools for running and testing Flutter apps. The SDK has the official Flutter code libraries, Dart code libraries, documentation, and even some sample apps.

  • An integrated development environment

    You can create Flutter apps by using geeky, keyboard-only tools, but eventually you’ll tire of typing and retyping commands. An integrated development environment (IDE), on the other hand, is a little like a word processor: A word processor helps you compose documents (memos, poems, and other works of fine literature); in contrast, an IDE helps you compose instructions for processors.

    For composing Flutter apps, I recommend the Android Studio IDE. Don’t be fooled by the word Android in the IDE’s name. Using Android Studio, you can create iPhone apps, web apps, and other kinds of apps.

  • Some sample Flutter apps, to help you get started

    All examples in this book are available for download here:

  • A device for testing your Flutter code

    You write some code, and then you run it to see whether it works correctly. Usually, it doesn’t work correctly until you make some changes. Most often, it doesn’t work correctly until you make lots of changes.

    In this book, I emphasize the creation of apps for iPhones and Android phones. You can run your code on your own phone, but you can also run it on your computer. To run a mobile app on your computer, you need software that displays a phone on your screen and runs your app within that display.

    In the iPhone world, this type of software is called a simulator, and Android calls its software an emulator. Simulators and emulators are examples of virtual devices. In contrast, an actual iPhone or Android phone is called a physical device.

    Tip Another name for a physical device is a real device. For emphasis, I sometimes write real, physical device. I suppose I could be more emphatic and write real, actual, hard-core, physical device, you betcha!

    Technical Stuff An emulator isn’t quite the same thing as a simulator. An emulator is software that behaves, to a large extent, like the hardware of a real, physical phone. A simulator is software that runs a phone’s apps without really behaving too much like the phone’s hardware. Fortunately, when you run this book’s apps, you can ignore this subtle difference.

All these tools run on the development computer — the laptop or desktop computer you use to develop Flutter apps. Later, when you publish your app, users run the app on their target devices — physical devices such as iPhones, Android phones, and (someday soon) smart toasters.

Here’s good news: You can download for free all the software you need to run this book’s examples. The software is separated into four downloads:

  • When you visit, you can click a button to install the Flutter SDK.
  • A button at the page gives you the Android Studio IDE download. Along with this download comes the Android emulator.
  • This book’s website ( has a link to all of the book’s code.
  • The iPhone simulator, as well as all the code you need for generating iPhone apps, comes with the installation of Xcode on your Mac. Xcode is available from the Macintosh App Store. (Unfortunately, you can’t develop for iPhone on a Windows PC.)

Warning In the world of mobile app development, things change very quickly. The instructions I write on Tuesday can be out-of-date by Thursday morning. The creators of Flutter are always creating new features and new tools. The old tools stop working, and the old instructions no longer apply. If you see something on your screen that doesn’t look like one of my screen shots, don’t despair. It might be something very new, or you might have reached a corner of the software that I don’t describe in this book. One way or another, send me an email, a tweet, or some other form of communication. (Don’t try sending a carrier pigeon. My cat will get to it before I find the note.) My contact info is in this book’s introduction.

What to Do

It’s an old, familiar refrain. First you get some software. Then you run the software.

Getting and installing the stuff

  1. Visit and download a file containing all the program examples in this book.

    The downloaded file is a .zip archive file. (Refer to the later sidebars “Those pesky filename extensions” and “Compressed archive files.”)

    Tip Most web browsers save files to the Downloads directory on the computer’s hard drive. But your browser may be configured a bit differently. One way or another, make note of the folder containing the downloaded file

  2. Extract the contents of the downloaded file to a place on your computer’s hard drive.
  3. Visit and download the Flutter SDK.

    Choose a version of the software that matches your operating system (Windows, Macintosh, or whatever).

  4. Extract the contents of the downloaded file to a place on your computer’s hard drive.

    The aforementioned contents is actually a directory full of stuff. The directory’s name is flutter. Put your new flutter directory in a place that isn’t protected with special privileges. For example, if you try extracting the flutter directory inside the c:\program files directory, Windows displays its User Account Control dialog box and asks for confirmation. Don’t put the flutter directory inside a place like that.

    Tip You say “folder.” I say “directory.” To not-quite-quote Gershwin, let’s call the whole thing off because, in this book, I use these two words interchangeably.

    Personally, I like to put the flutter directory inside my home directory. My computer has a directory named Users, and inside that Users directory is a directory named barryburd. That barryburd directory is my home directory. This home directory contains my Documents directory, my Downloads directory, and lots of other stuff. After I extract the downloaded file’s content, my barryburd home directory has a brand-new flutter directory.

    You don’t have to extract the flutter directory right inside your home directory, but it’s the simplest, most reliable thing I can think of doing.

  5. Make a note of the place on your hard drive where the new flutter directory lives.

    For example, if you copied the .zip file’s contents to your /Users/janeqreader directory, make a note of the /Users/janeqreader/flutter directory. That’s your Flutter SDK path.

    Tip To make sure that you’ve extracted the downloaded file’s contents correctly, look inside the flutter directory for a subdirectory named bin. My flutter directory has other subdirectories, named dev, examples, and packages. Your mileage may vary, depending on when you download the Flutter SDK.

  6. Visit and download the Android Studio IDE.

    The download is an .exe file, a .dmg file, or maybe something else.

  7. Install the software that you downloaded in Step 6.

    During the installation, a dialog box may offer the option of installing an Android virtual device (AVD). If so, accept the option.

    For other details about installing Android Studio, see this chapter’s later section “On Installing Android Studio.”

    Tip Android Studio isn’t the only IDE that has features for creating Flutter apps. Some developers prefer Virtual Studio Code (known affectionately as VS Code), which is available for Windows, Macintosh, and Linux. And if you enjoy roughing it, you can do without an IDE and use the command line along with your favorite text editor — Emacs, vi, or Notepad. In this book, I focus on Android Studio, but you can find plenty of alternatives.

    On the web To learn more about Visual Studio Code, visit

Tip While you’re visiting any software download site, check the requirements for downloading, installing, and running that software. Make sure you have enough memory and an operating system that’s sufficiently up to date.

For Mac users only

If you have a Mac and you want to create iPhone apps, follow these steps:

  1. Select App Store from the Apple menu.
  2. In the store’s search field, type Xcode and then press Enter.

    The App Store’s search finds dozens of apps, but only one has the simple name Xcode.

  3. Click the Xcode app’s Get button.

    As a result, the App Store installs Xcode on your computer.

  4. Launch the Xcode application.

    The first time you run Xcode, your Mac installs some additional components. If you want your apps to run on Apple devices, you need those additional components.

Configuring Android Studio

Android Studio doesn’t come automatically with Flutter support, meaning you have to add Flutter support the first time you run the IDE. Here’s what you do.

  1. Launch the Android Studio application.

    The first time you run a fresh, new copy of Android Studio, you see the Welcome screen.

  2. Select Configure ⇒   Plugins on the Welcome screen.

    You’ll find the Configure drop-down menu in the lower right corner of the Welcome screen. (See Figure 2-1.)

    Snapshot of Android Studio's default Welcome screen.

    FIGURE 2-1: Android Studio’s default Welcome screen.

  3. Search for a plugin named Flutter. Install that plugin.

    If Android Studio offers the option of installing Dart as well, accept the option.

    After installing the plugin, Android Studio may want to be restarted. Of course, you should restart it. When you do, you see the Welcome screen again. Now the Welcome screen includes the Start a New Flutter Project option. (See Figure 2-2.)

    For other details about configuring Android Studio, see the section “On installing Android Studio’s Flutter plugin,” later in this chapter.

Running your first app

You’ve installed Android Studio, added Android Studio’s Flutter plugin, and then restarted Android Studio. Now you’re staring at Android Studio’s Welcome screen. What do you do next?

Snapshot of the Flutter plugin that the user has installed.

FIGURE 2-2: You’ve installed the Flutter plugin.

  1. Connect to the Internet.

    During the run of your very first app, Android Studio downloads some additional software.

  2. Select the Start a New Flutter Project option. (Refer to Figure 2-2.)

    On your phone, an app is an app, and that’s all there is to it. But on your development computer, all your work is divided into projects. For professional purposes, you’re not absolutely correct if you think of one app as equaling one project. But, for the examples in this book, the “one project equals one app” model works just fine.

    Tip If you don’t see the Start a New Flutter Project option, you may not have installed the Flutter plugin correctly. I recommend double-checking the instructions in the “Configuring Android Studio” section, earlier in this chapter. If that doesn’t help, or if you get stuck somewhere else in this chapter, send me an email. My email address is in the book’s introduction.

    Having selected Start a New Flutter Project, you’ll see three dialog boxes, one after another. The first asks what kind of Flutter project you want to create, the second asks for the new app’s name and other details, and the third creates something called a package.

  3. In the first dialog box, select Flutter Application and then click Next. (See Figure 2-3.)

    The second dialog box has four fields: Project Name, Flutter SDK Path, Project Location, and Description. (See Figure 2-4.)

    Snapshot of creating a Flutter application.

    FIGURE 2-3: Creating a Flutter application.

    Snapshot of the details about a new app.

    FIGURE 2-4: Details about your new app.

  4. Select a name that has only lowercase letters and, if you want, underscore (_) characters.

    Remember Flutter project names cannot contain uppercase letters, blank spaces, or punctuation characters other than the underscore.

    Tip If you create many apps, keeping track of them all can drive you crazy. So, it helps if you decide on a formula for naming your apps and then stick to that formula as closely as you can. Later on, when you start marketing your apps, you can abandon the formula, and use clever names that attract peoples’ attention.

  5. For the Flutter SDK path, supply your Flutter SDK path.

    You copied down the Flutter SDK path when you followed Step 5 in the earlier section “Getting and installing the stuff,” didn’t you? If you forgot, search your hard drive for a folder named flutter. It’s bound to be there somewhere.

  6. Don’t change the Project Location option, unless you have a specific reason for doing so.

    You don’t have to specify a new directory for each of your projects. Android Studio does that for you automatically with this project location as the starting point.

  7. For the description, type something that’s silly and off the wall.

    Do it now, while you still can. When you create apps professionally, you have to be more serious.

    After you click Next, Android Studio displays its Set the Package Name dialog box. (See Figure 2-5.)

    Snapshot of the finishing touches.

    FIGURE 2-5: The finishing touches.

  8. If your company has a domain name, or if you have your own domain name, type it in the Company Domain field. If not, type anything at all or leave the default text alone.

    A package is a collection of closely related pieces of code, and each Flutter app belongs to its own package. In the Flutter world, it’s customary to start a package’s name with the reverse of a domain name. For example, my company’s domain name is So, when I create a Flutter app, the app is usually in a package named com.allmycode.somethingorother. The somethingorother part is unique to each of my apps.

    When you create your first project, the Company Name field’s default text is probably Several years ago, the Internet Corporation for Assigned Names and Numbers (ICANN) set this name aside for anyone to use. Immediately below that, the dialog box supplies the package name This default package name is just fine when you’re creating your very first Flutter apps.

    This dialog box may have check boxes labeled Generate Sample Content, Include Kotlin Support for Android Code, and Include Swift Support for iOS Code. Don’t worry about these check boxes. Check them, or don’t check them. For your first Flutter app, it doesn’t matter.

  9. Click Finish.

    As if by magic, Android Studio’s main window appears. (See Figure 2-6.) The main window has all the tools you need for developing top-notch Flutter applications. It even has a sample starter application, which you run in the next few steps.

    Crossreference Android Studio’s main window may look overwhelming at first. To help you become underwhelmed (or maybe just average-whelmed), I describe the main window’s parts in this chapter’s “Using Android Studio” section, later in this chapter.

    In Figure 2-7, notice two important items near the top of Android Studio’s main window:

    • The Target Selector displays the text <no devices>.
    • The Run icon is a little right-pointing green arrow.

    What you do next depends on your development computer and your development goals.

  10. If you have a Mac, and you want to run an iPhone simulator, select Open iOS Simulator in the Target Selector drop-down list.

    If you don’t have a Mac, or if you want to run an Android emulator, select Tools ⇒   AVD Manager on Android Studio’s main menu bar. In the resulting dialog box, look for a Green Arrow icon on the right side of the dialog box. Click that Green Arrow icon. (See Figure 2-8.)

    Snapshot of Android Studio's main window.

    FIGURE 2-6: Android Studio’s main window.

    Snapshot of Android Studio's toolbar.

    FIGURE 2-7: Android Studio’s toolbar.

    Snapshot of start running an Android Virtual Device.

    FIGURE 2-8: Start running an Android Virtual Device.

    Crossreference If the AVD manager is empty — that is to say, if it’s not like the manager shown in Figure 2-8, which shows a virtual device labeled Pixel API 28 — you have to create an Android Virtual Device. See the section “Running apps on an Android device,” later in this chapter, for details.

    Warning Android Virtual Devices don’t always start quickly. On my computer with 16 gigabytes of RAM, the start-up time may be two to three minutes. On a computer with only 4 gigabytes of RAM, the AVD might never start up. Apple’s iPhone simulator tends to be a bit snappier, but you never know. I’ve devoted two later sections of this chapter to Android emulator and iPhone simulator tricks — “On adding virtual devices” and “Divisiveness Among Devices.”

    When your virtual device’s home screen appears on the screen, you’re ready to run the sample Flutter app.

  11. Click the Run icon on Android Studio’s toolbar. (Refer to Figure 2-7.)

    As a result, Android Studio’s Run tool window appears in the lower portion of the main window. A few messages appear while you wait impatiently for the app to start running. When the app starts running, the virtual device (the simulator or emulator) sports a handsome display. (See Figure 2-9.)

Snapshot of the screen appearing Isn't it wonderful.

FIGURE 2-9: Isn’t it wonderful?

Congratulations! Your first app is running. You can try out the app by clicking the mouse on the app’s floating action button (the circular item in the lower right corner of the virtual device’s screen). The message in the middle tells you how many times you’ve clicked the button. It’s not the world’s most useful app, but it’s a good start.

For details about any of these steps, see the next several sections.

Dealing with the Devil’s Details

Several decades ago, I bought a book about databases from the deep-discount table at my local supermarket. When I got the book home, I got hopelessly stuck in Chapter 1. I couldn’t figure out how to run the software correctly. I struggled for several hours and then gave up. I’ve never touched the book since that day.

Why do I write about this nasty experience? I write about it to assure you that I’ve scraped my knuckles trying to get software running. It’s the problem that most readers ask about when they send an email to me. It’s natural to get stuck and need help.

In earlier sections, I present the basic steps for setting up your computer and running your first Flutter app. Basic steps are nice, but they don’t work for everyone. That’s why, in this section, I delve a bit deeper.

Warning In the world of mobile app development, things change very quickly. The instructions that I write on Tuesday can be out-of-date by Thursday morning. The creators of Flutter are always creating new features and new tools. The old tools stop working, and the old instructions no longer apply. If you see something on your screen that doesn’t look like one of my screen shots, don’t despair. It might be something very new, or you might have reached a corner of the software that I don’t describe in this book. One way or another, send me an email or a tweet or some other form of communication. (Don’t send a carrier pigeon. My cat will get to it before I find the note.) My contact info is in this book’s introduction.

On installing Android Studio

What you do to install Android Studio depends on your operating system:

  • In Windows: The downloaded file is probably an .exe file. Double-click the .exe file’s icon.

    When you double-click the .exe file’s icon, a wizard guides you through the installation.

  • On a Mac: The downloaded file is probably a .dmg file. Double-click the .dmg file’s icon.

    When you double-click the .dmg file’s icon, you see the Android Studio icon (also known as the Android icon). Drag the Android Studio icon to your Applications folder.

About .exe files and .dmg files, I make no guarantees. The downloaded file might be a .zip archive or maybe some other exotic kind of archive file. If you can’t figure out what to do, send me an email.

Crossreference For more information on topics like .exe and .dmg, refer to the earlier sidebar “Those pesky filename extensions.” And, if you need help with .zip files, see the earlier sidebar “Compressed archive files.”

On launching Android Studio for the first time

Is it time to launch Android Studio? This section has a few small details.

  • In Windows: Click the Start button and look for the Android Studio entry.
  • On a Mac: Press Command-space to make the Spotlight appear. In the Spotlight’s search field, start typing Android Studio. When your Mac makes the full name Android Studio appear in the Spotlight’s search field, press Enter.

    Tip If your Mac complains that Android Studio is from an unidentified developer, look for the Android Studio icon in your Applications folder. Ctrl-click the Android Studio icon and select Open. When another “unidentified developer” box appears, click the box’s Open button.

When you launch Android Studio for the first time, you might see a dialog box offering to import settings from a previous Android Studio installation. Chances are, you don’t have a previous Android Studio installation, so you should firmly but politely decline this offer.

When the dust settles, Android Studio displays the Welcome screen. The Welcome screen has options such as Start a New Android Studio Project, Open an Existing Android Studio Project, Configure, and Get Help. (Refer to Figures 2-1 and 2-2.)

You see this Welcome screen again and again. Stated informally, the Welcome screen says, “At the moment, you’re not working on any particular project (any particular Flutter app). So, what do you want to do next?”

On installing Android Studio’s Flutter plugin

When you first launch Android Studio, you should definitely install Android Studio’s plugin for developing Flutter apps. Here’s a closer, more detailed look at how you do it:

  1. On Android Studio’s Welcome screen, select Configure ⇒   Plugins. (See Figure 2-10.)

    A Plugins dialog box with three tabs appears on the screen. The tabs are labeled Marketplace, Installed, and Updates (see Figure 2-11).

    Snapshot of check out Android Studio's plugins.

    FIGURE 2-10: Check out Android Studio’s plugins.

    Snapshot of the Plugins dialog box.

    FIGURE 2-11: The Plugins dialog box.

    Tip On some versions of Android Studio, the Welcome screen has no Configure option. In that case, select the Welcome screen’s Start a New Android Studio Project option. Accept all the defaults until you see Android Studio’s main window. Then, in the main menu bar, select File ⇒   Settings ⇒   Plugins (on Windows) or Android Studio ⇒   Preferences ⇒   Plugins (on a Mac).

  2. Select the Marketplace tab.

    When you do, Android Studio shows you an extensive list of available plugins. You’ll want to narrow down this list.

  3. In the dialog box’s search field, type the word Flutter.

    Android Studio shows you a bunch of plugins with the word Flutter in their titles. Each plugin has its own Install button. Look for the plugin named Flutter — not Flutter Snippets, flutter_json_format, or anything like that.

  4. Select the Install button for the plugin named Flutter.

    After showing you a dialog box that Google’s lawyers created, Android Studio asks whether you want to install the Dart plugin.

  5. Select Yes.

    You definitely want to install the Dart plugin. (To find out why, refer to Chapter 1.)

    When the plugin installations are finished, Android Studio offers to restart itself.

  6. Restart Android Studio.

After the restart, Android Studio’s Welcome screen has a new option, with the label Start a New Flutter Project. (Refer to Figure 2-2.) You’re all set.

On adding virtual devices

When it comes to installing virtual devices, the stories for iPhone and Android are a bit different.

  • With an Apple, Windows, or Linux computer, you can download Android Studio and get the Android emulator that comes with it. You might have to do a bit of work to install an Android Virtual Device (AVD), but that’s not a big deal.
  • If you have an Apple computer, you get an iPhone simulator by downloading Apple’s Xcode software.

    Warning If you don’t have an Apple computer, you can find third-party simulators by searching the Web, but keep in mind that creating iPhone apps on anything other than a Mac is difficult. Depending on the way you do it, the process might even be illegal.

Android makes a distinction between an emulator and an Android Virtual Device (AVD). Here’s the scoop:

  • When you install Android Studio, you get the Android phone emulator automatically. This emulator can bridge the gap between your development computer’s hardware and a mock-up of a phone’s hardware. But which phone’s hardware is it mocking? Is it a Samsung Galaxy or a Sony Xperia? How big is the phone’s screen? What kind of camera does the phone have?
  • An Android Virtual Device is a description of a phone’s hardware. The emulator doesn’t work unless you create an AVD for the emulator to emulate. When you install Android Studio, you may or may not see an option to install an AVD. If you do, accept the option. If you don’t, that’s okay. You’ll be able to create a bunch of AVDs when you get Android Studio running.

When you install Android Studio, the installer may offer you the option to create an AVD for you to use. If you weren’t offered this option, or if you skipped the option, you can create an AVD using the AVD Manager tool. In fact, you can create several additional AVDs and use several different AVDs to run and test your Flutter apps on Android’s emulator.

To open the AVD Manager, go to Android Studio’s main menu bar and choose Tools ⇒   AVD Manager. Figures 2-12 through 2-15 show the dialog boxes that you might find in the AVD Manager.

Snapshot of the opening page of the AVD Manager.

FIGURE 2-12: The opening page of the AVD Manager.

Snapshot of the first page in creating a new AVD.

FIGURE 2-13: The first page in creating a new AVD.

Snapshot of the second page in creating a new AVD.

FIGURE 2-14: The second page in creating a new AVD.

Snapshot of the final page in creating a new AVD.

FIGURE 2-15: The final page in creating a new AVD.

I’m reluctant to list instructions for using the AVD Manager, because the look of the AVD Manager tool is constantly in flux. Chances are, what you see on your computer’s screen doesn’t look much like the mid-2019 screen shots in Figures 2-12 through 2-15.

Instead of giving you explicit instructions, my general advice when creating a new AVD is to select the newer phones or tablets and the higher-numbered API levels, and to accept defaults whenever you’re tempted to play eeny-meeny-miny-moe. Just keep clicking Next until you can click Finish. If you don’t like the AVD that you’ve created, you can always reopen the AVD Manager and select different options to create another AVD. When you reach the level of proficiency where you’re finicky about your AVD’s characteristics, you’ll probably know your way around many of the AVD Manager’s options, and you’ll be able to choose wisely.

On installing Flutter

Sometimes, when I feel sick, I go to the doctor. If you’re having trouble running apps, and you think your Flutter installation is sick, you can take Flutter to the doctor. Here’s how:

  1. In Android Studio, start a new Flutter project or open an existing project.

    For help with that, refer to this chapter’s “Running your first app” section.

  2. In Android Studio’s main menu bar, select Tools ⇒   Flutter ⇒   Flutter Doctor.

    As a result, the computer reports to you on the health of your Flutter installation.

The report from Flutter Doctor isn’t always helpful. Some of the report’s findings may be false alarms. Others may be difficult to interpret. If you see something that looks like a useful diagnosis, give it a try. Many of the doctor’s hints involve opening up a Terminal or Command Prompt window. You’ll find advice about that in the “Your friend, the command line” sidebar.

Warning The content provided by flutter doctor is not intended to serve as a substitute for professional medical advice. Seek the advice of your Flutter physician with any questions you may have regarding a medical condition. Never disregard professional medical advice because of something you have read in the output of flutter doctor.

Divisiveness Among Devices

If your development computer has enough horsepower, you can run a few Android Virtual Devices simultaneously. On a Mac, you can run an iPhone simulator while your Android Virtual Devices are running. But using your virtual and physical devices can be tricky. This section gives you some tips.

Running apps on an Android device

A reader from Minnesota writes:

  • Dear Barry,
  • I’ve followed all your instructions. Things go well until I try to run an app. The Android emulator doesn’t work. What should I do?
  • Signed,



  • Still Freezing in Minneapolis

Well, Ms. Freezing, the emulator that comes with Android Studio swallows up lots of resources on your development computer. If you’re like me and you don’t always have the latest, most powerful hardware, you may have trouble running apps in the emulator. Maybe you don’t see Android’s home screen or you don’t see your app running five minutes or so after the emulator starts running. If so, here are several things you can try:

  • Lather, rinse, repeat.

    Close the emulator and launch your application again. Sometimes, the second or third time’s a charm. On rare occasions, my first three attempts fail, but my fourth attempt succeeds.

  • If you have access to a computer with more RAM, try running your app on it.

    Horsepower matters.

  • If you don’t have access to a computer with more RAM, close all non-essential programs on your development computer, and try running your app again.
  • Try a different AVD.

    The “On adding virtual devices” section, earlier in this chapter, tells you how to add a new AVD to your system. An AVD with an x86 system image is better than an AVD with an armeabi image. (Fortunately, when a dialog box lets you choose between x86 and armeabi, you don’t have to know what x86 or armeabi means.)

  • Wrestle with virtualization technology.

    You might not want to start down this rabbit hole.

    When it runs on an Intel x86 processor, Android’s emulator tries to use something called Intel Virtualization Technology (VT) with the Intel Hardware Accelerated Execution Manager (HAXM). If your computer isn’t completely comfortable with a VT-and-HAXM configuration, you’re likely to have trouble using Android’s emulator.

    Don’t despair! Try installing an armeabi system image.

    Finally, if your computer can use VT and HAXM, and if you want to adjust these items on your computer, go right ahead. Just don’t blame me if, a month later, you suddenly remember that your goal was to learn about Flutter.

The previous bulleted list describes a few remedies for problems with Android Studio’s emulator. Unfortunately, none of the bullets in this list is a silver bullet. If you’ve tried these tricks, and you’re still having trouble, you might try abandoning the emulator that comes with Android Studio and running apps on a “real” device.

Testing apps on a physical device

You can bypass virtual devices and test your apps on a physical phone, a tablet device, or maybe even a smart coffee pot. To do so, you have to prepare the physical device, prepare your development computer, and then hook together the two. It’s quite a chore, but after you do it the first time, it becomes much easier. This section describes an outline of the steps you must follow.

On the web For more details, visit these pages: - deploy-to-ios-devices - set-up-your-android-device

Preparing to test on an Android physical device

To test your app on an Android device, follow these steps:

  1. On your Android device, enable Developer Options.

    On many Android devices, you do this by choosing Settings ⇒   About. In the About list, tap the Build Number item seven times. (Yes, seven times.) Then press the Back button to return to the Settings list. In the Settings list, tap System ⇒   Developer Options.

    Tip Some people have reported that, after tapping the Build Number item seven times, it helps to twirl a rabbit’s foot over their head three times. So far, I haven’t been able to replicate these results.

  2. In the Developer Options list, turn on USB debugging.

    Here’s what one of my devices displays when I mess with this setting:

    USB debugging is intended for development purposes.
    Use it to copy data between your computer and your device,
    install apps on your device without notification, and read log data.

    The stewards of Android are warning me that the USB Debugging option can expose my device to malware.

    On my device, I keep USB debugging on all the time. But if you’re nervous about security, turn off USB debugging when you’re not using the device to develop apps.

  3. (For Windows users only) Visit to download your Android device’s Windows USB driver. Install the driver on your Windows development computer.

    While you follow the next step, keep an eye on your Android device’s screen.

  4. With a USB cable, connect the device to the development computer.

    Tip Not all USB cables are created equal. Some cables, called data cables, have wires and metal in places where other cables, called charging cables, have nothing except plastic. Try to use whatever USB cable came with your device. If, like me, you can’t find the cable that came with your device or you don’t know which cable came with your device, try more than one cable. When you find a cable that works, label that able cable. (If the cable always works, label it “stable able cable.”)

    When you plug in the cable, you see a pop-up dialog box on the Android device’s screen. The pop-up asks whether you want to allow USB debugging.

  5. Yes, allow USB debugging.

    If you’re not looking for it, you can miss the pop-up to allow USB debugging. Be sure to look for this pop-up when you plug in your device. If you definitely don’t see the pop-up, you might be okay anyway. But if the message appears and you don’t respond to it, you definitely won’t be okay.

Preparing to test on an iPhone

To test your app on an iPhone (or even an iPad), you must be using an Apple computer. If you have a Mac, follow these steps:

  1. Visit and follow the instructions to install Homebrew on your computer.

    Homebrew is a third-party software package manager for macOS and Linux. You can use it to install all kinds of software, not just iPhone development tools.

  2. Open your Mac’s Terminal application.
  3. In the Terminal application window, type the following commands, one after another:

    brew update
    brew install --HEAD usbmuxd
    brew link usbmuxd
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller ios-deploy cocoapods
    pod setup

    Wasn’t that fun? It takes a long time to get responses, and you probably see scary warning messages along the way.

    Warning The instructions in this step are current as of August 23, 2019 at 10:05 AM, Eastern Daylight Time. After that moment, I make no promises. If you get stuck, consult the web or send me an email.

  4. Visit, and sign up for free membership in Apple’s developer program.

After these three steps, your development computer is ready to go. Follow these steps whenever you want to test a new Flutter app on a physical iPhone:

  1. Connect the physical phone to your development computer using a USB data cable.

    Remember Not all cables are alike. Apple puts a proprietary chip in each of its iPhone cables. If you buy your cable from a third-party vendor, you might not be able to use it to transfer an app to your phone.

  2. In Android Studio, open your new Flutter project.
  3. Look for the Project tool window — the panel displaying a tree of files and folders.

    You find the Project tool window along the left side of Android Studio’s main window. If you have trouble finding it, skip ahead to the section entitled “The Project tool window” in this chapter.

  4. Expand one of the tree’s topmost branches to find a subbranch named iOS.
  5. Right-click the iOS subbranch. In the resulting context menu, select Flutter ⇒   Open iOS Module in Xcode.

    As a result, Xcode starts up. There’s a tree of files and folders on the left side of the Xcode window.

  6. In the tree of files and folders, select Runner. (See Figure 2-16.)
    Snapshot of the Xcode window and selecting the Signing & Capabilities tab.

    FIGURE 2-16: Who’s Berry Burd?

  7. Select the Signing & Capabilities tab near the top of the Xcode window. (Again, refer to Figure 2-16.)

    The Signing & Capabilities tab has a Team dropdown list.

  8. In the Team drop-down list, select Add an Account.

    As a result, an Accounts dialog box appears. With your Apple ID, you automatically belong to a team of developers — your personal team with you as its only member.

  9. Do whatever you have to do in the Accounts dialog box, and then dismiss the dialog box.

    As a result, you return to the Signing & Capabilities tab.

  10. In the Team drop-down list, select your very own team.
  11. Close Xcode.

    You’re good to go.

Testing on any physical device (Android or iPhone)

When you’re ready to test your app on a physical device, and you’ve connected the device to your development computer, look at the Target Selector drop-down list on Android Studio’s toolbar. When your development computer is communicating properly with the physical device, the device’s name appears as one of this drop-down list’s items. (See Figure 2-17.) Select this item and then click the Run icon.

Snapshot of the drop-down list
on Android Studio’s toolbar.

FIGURE 2-17: My iPhone is connected!

Using Android Studio

Android Studio is a customized version of IntelliJ IDEA — a general-purpose IDE with tools for Java development, C/C++ development, PHP development, modeling, project management, testing, debugging, and much more.

In this section, you get an overview of Android Studio’s main window. I focus on the most useful features that help you build Flutter apps, but keep in mind that Android Studio has hundreds of features and many ways to access each feature.

Starting up

Each Flutter app belongs to a project. You can have dozens of projects on your computer’s hard drive. When you run Android Studio, each of your projects is either open or closed. An open project appears in a window (its own window) on your computer screen. A closed project doesn’t appear in a window.

Several of your projects can be open at the same time. You can switch between projects by moving from window to window.

Technical Stuff I often refer to an open project’s window as Android Studio’s main window. This can be slightly misleading because, with several projects open at a time, you have several main windows open at a time. In a way, none of these windows is more “main” than the others. When I write main window, I’m referring to the window whose Flutter project you’re working on at that moment.

If Android Studio is running and no projects are open, Android Studio displays its Welcome screen. (Refer to Figure 2-2.) The Welcome screen may display some recently closed projects. If so, you can open a project by clicking its name on the Welcome screen. For an existing app that’s not on the Recent Projects list, you can click the Welcome screen’s Open an Existing Android Studio Project option.

If you have any open projects, Android Studio doesn’t display the Welcome screen. In that case, you can open another project by choosing File ⇒   Open or File ⇒   Open Recent in an open project’s window. To close a project, you can choose File ⇒   Close Project, or you can do whatever you normally do to close one of the windows on your computer. (On a PC, click the X in the window’s upper right corner. On a Mac, click the little red button in the window’s upper left corner.)

Tip Android Studio remembers which projects were open from one run to the next. If any projects are open when you quit Android Studio, those projects open again (with their main windows showing) the next time you launch Android Studio. You can override this behavior (so that only the Welcome screen appears each time you launch Android Studio). In Android Studio on a Windows computer, start by choosing File ⇒   Settings ⇒   Appearance and Behavior ⇒   System Settings. In Android Studio on a Mac, choose Android Studio ⇒   Preferences ⇒   Appearance and Behavior ⇒   System Settings. In either case, uncheck the Reopen Last Project on Startup check box.

The main window

Android Studio’s main window is divided into several areas. Some of these areas can appear and disappear on your command. What comes next is a description of the areas in Figure 2-18, moving from the top of the main window to the bottom.

Snapshot of the main window which has several areas.

FIGURE 2-18: The main window has several areas.

Remember The areas that you see on your computer screen may be different from the areas in Figure 2-18. Usually, that’s okay. You can make areas come and go by choosing certain menu options, including the View option on Android Studio’s main menu bar. You can also click the little tool buttons on the edges of the main window.

The top of the main window

The topmost area contains the toolbar and the navigation bar.

  • The toolbar contains action buttons, such as Open and Save All. It also contains the Target Selector and the Run icon.

    The Target Selector is the dropdown list whose default option is <no devices>. In Figure 2-18, the Target Selector displays the name iPhone XR.

    The Run icon is the thing that looks like a green Play button.

    You can read more about these items earlier, in this chapter’s “Running your first app” section.

  • The navigation bar displays the path to one of the files in your Flutter project.

    A Flutter project contains many files, and, at any particular moment, you work on one of these files. The navigation bar points to that file.

The Project tool window

Below the main menu and the toolbars, you see two different areas. The area on the left contains the Project tool window, which you use to navigate from one file to another within your Android app.

At any given moment, the Project tool window displays one of several possible views. For example, back in Figure 2-18, the Project tool window displays its Project view. In Figure 2-19, I click the drop-down list and select Packages view (instead of Project view).

Snapshot of selecting packages view.

FIGURE 2-19: Selecting Packages view.

Packages view displays many of the same files as Project view, but in Packages view, the files are grouped differently. For most of this book’s instructions, I assume that the Project tool window is in its default view; namely, Project view.

Remember If Android Studio doesn’t display the Project tool window, look for the Project tool button — the little button displaying the word Project on the left edge of the main window. Click that Project tool button. (But wait! What if you can’t find the little Project button? In that case, go to Android Studio’s main menu and select Window ⇒   Restore Default Layout.)

The Editor area

The area to the right of the Project tool window is the Editor area. When you edit a Dart program file, the editor displays the file’s text. (Refer to Figure 2-18.) You can type, cut, copy, and paste text as you would in other text editors.

The Editor area can have several tabs. Each tab contains a file that’s open for editing. To open a file for editing, double-click the file’s branch in the Project tool window. To close the file, click the little x next to the file’s name on the Editor tab.

The lower area

Below the Project tool window and the Editor area is another area that contains several tool windows. When you’re not using any of these tool windows, you might not see this lower area.

In the lower area, the tool window that I use most often is the Run tool window. (Refer to the lower portion of Figure 2-18.) The Run tool window appears automatically when you click the Run icon. This tool window displays information about the run of a Flutter app. If your app isn’t running correctly, the Run tool window may contain useful diagnostic information.

You can force other tool windows to appear in the lower area by clicking tool buttons near the bottom of the Android Studio window. For example, when you click the Terminal tool button, Android Studio displays the Windows Command Prompt, the Mac Terminal app, or another text-based command screen that you specify. For details, refer to the earlier sidebar “Your friend, the command line.”

Remember A particular tool button might not appear when there’s nothing you can do with it. For example, the Run tool button might not appear until you press the Run icon. Don’t worry about that. The tool button shows up whenever you need it.

Finishing your tour of the areas in Figure 2-18… .

The status bar

The status bar is at the bottom of Android Studio’s window.

The status bar tells you what’s happening now. For example, if the cursor is on the 37th character of the 11th line in the editor, you see 11:37 somewhere on the status line. When you tell Android Studio to run your app, the status bar contains the Run tool window’s most recent message.

The kitchen sink

In addition to the areas that I mention in this section, other areas might pop up as the need arises. You can dismiss an area by clicking the area’s Hide icon. (See Figure 2-20.)

Snapshot of hiding the project tool window area.

FIGURE 2-20: Hiding the Project tool window area.

Running This Book’s Sample Programs

This book has dozens of sample Flutter apps, and they’re all available for download from the book’s website: You can run any of these programs as part of an Android Studio Flutter app. This section has all the details.

  1. Launch Android Studio.

    Remember For the run of your first app, you need an Internet connection.

    What you do next depends on what you see when you launch Android Studio.

  2. If you see Android Studio’s Welcome screen (refer to Figure 2-2), select Start a New Flutter Project.

    If you see another Android Studio window with a File option on the main menu bar, choose File ⇒   New ⇒   New Flutter Project on the main menu bar.

    Either way, the first dialog box for creating a new Flutter project appears.

  3. Create a new Flutter project by following Steps 3 through 9 in this chapter’s earlier section “Running your first app.”
  4. In Android Studio’s Project tool window, look for a folder named lib.

    If you need help finding that tool window, refer to the “Project tool window” section earlier in this chapter.

    The Project tool window contains a tree of folders and files. Expand one of the tree’s topmost branches to find the lib folder. This lib folder contains your project’s Dart code.

  5. Right-click the tree’s main.dart branch, and then select Delete.

    If Android Studio prompts you for confirmation, click OK. One way or another, give main.dart the old heave-ho.

    Tip Throughout this book, I write right-click as though everyone has a mouse with two or more buttons. If you’re a Mac user and your mouse has only one button, Control+click wherever you see the term right-click.

  6. Make sure that you’ve uncompressed the file.

    For details, refer to the earlier sidebar “Compressed archive files.”

    Tip If you’re unsure where to find the file, look first in a folder named Downloads. Most web browsers put stuff inside Downloads by default.

    Crossreference Safari on a Mac generally uncompresses .zip archives automatically, and Windows browsers (Internet Explorer, Firefox, Chrome, and others) do not uncompress .zip archives automatically. For the complete scoop on archive files, see the earlier sidebar “Compressed archive files.”

  7. In File Explorer or the Finder, navigate to the uncompressed FlutterForDummies_Listings folder. Inside that folder, look for the example that you want to run.

    If you look inside the uncompressed download, you notice files named App0301.dart, App0302.dart, and so on. With a few exceptions, the numbers in these file names are chapter numbers followed by listing numbers. For example, in the name App0602.dart, the 06 stands for Chapter 6, and the 02 stands for the second code listing in that chapter.

    For this experiment, I suggest that you look for the App0201.dart file. (No code is listed anywhere in this chapter. So, in this unusual case, 0201 doesn’t refer to a project whose code is in Listing 2-1.)

  8. Right-click the chosen App####.dart file. Then, in the resulting context menu, select Copy.
  9. Right-click the new project’s empty lib folder. On the resulting context menu, select Paste.

    If Android Studio displays a dialog box offering to paste to a particular directory, check to make sure that the directory’s full name ends in lib. Then, press OK.

    Now you’re ready to run one of this book’s examples. Go for it!

Warning On occasion, you may have more than one file in your project’s lib folder and more than one app in your project. If you do, pressing the Run icon might not run the app that appears in Android Studio’s editor area. To run the app that’s showing in the editor area, look for that app’s tab along the top of the editor area. When you right-click that tab, you see an option such as Run ’App0201.dart’. Select that option and watch the program run.

Enjoying reruns

The second time you run a particular example from this book, you don’t have to follow all the steps in the previous section. It’s easy to run an example over and over again. You can make changes to the code and then click the Run icon again. That’s all you have to do.

If you’ve closed a project and you want to run it again, simply reopen the project in Android Studio and click the Run icon. For details, refer to this chapter’s “Starting up” section.

If you’re finicky …

After following the steps in the previous section, you may see some error markers (squiggly, red underlines) in the Project tool window. Android Studio’s sample Flutter project describes something named MyApp, but the code that you copied into the lib folder makes no mention of MyApp. You can run this project over and over again without fixing the squiggly, red underlines. But if you want to fix them, simply follow these steps:

  1. In the Project tool window, expand the branch labeled test.

    Inside that branch, you find a file named widget_test.dart.

  2. Delete the widget_test.dart file.

    The squiggly, red underlines are gone. Problem solved!

Warning The apps in this book are practice apps. No one runs these apps to get real work done. (This includes Doris, whom you meet in Chapter 7.) When you develop a real app, you must never ignore code in the test folder. Testing is an essential part of the software development process. Thorough testing is what makes programs work reliably.

Tip Another way to get rid of the squiggly, red underlines is to jump into a time machine and redo instructions in the “Running This Book’s Sample Programs” section. If you disregard Step 5 and don’t delete main.dart, you won’t get those red underlines. But you may have to deal with two other issues. The Run icon’s behavior may become a bit confusing. In addition, you may create a rift in the space-time continuum and become your own grandparent.

Were These Setup Steps Fun or What?

I always dread any software setup that isn’t completely trivial. Everybody’s computer is different, and the instructions for an app’s installation can’t possibly cover every possible scenario. But, after getting the software up and running, I feel exhilarated. I can finally start using the software and enjoying the payoff from having labored through the setup steps.

If all the jibber-jabber in this chapter got you to the point where you’re ready to learn Flutter, great! But if you’re still struggling to get the software working, drop me a line. My contact info is in the book’s introduction. I’ll be happy to help.