Setting Up Your Computer for Mobile App Development

Getting and installing the stuff

1. Visit www.allmycode.com/Flutter 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.”)

   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 FlutterForDummies_Listings.zip.

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

3. Visit https://flutter.dev/docs/get-started/install 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.

   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.

   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 http://developer.android.com/studio 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.”

   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.

   To learn more about Visual Studio Code, visit https://code.visualstudio.com.

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.)

   

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?

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.

   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.)

   

   

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

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

   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.)

   

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 allmycode.com. 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 example.com. 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 example.com.whateveryounamedyourapp. 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.

   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.)

    

    

    

    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.

    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.)

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.

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.

For more details, visit these pages:

https://flutter.dev/docs/get-started/install/macos - deploy-to-ios-devices
https://flutter.dev/docs/get-started/install/windows - 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.

   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 https://developer.android.com/studio/run/oem-usb.html 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.

   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 https://brew.sh 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.

   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 developer.apple.com, 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.

   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.)

   

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.

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.

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.)

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.

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 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).

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.

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 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.)

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!

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.

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.