Flutter For Dummies
Book image
Explore Book Buy On Amazon
Many app developers use Android Studio to build their Flutter apps. If you’re new to Flutter and Android’s SDK, use this guide to run your first Flutter app. Before you can get going, you need to install Android Studio and add Android Studio’s Flutter plugin. Then, restart 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 Flutter app, Android Studio downloads some additional software.

  2. Select the Start a New Flutter Project option.

    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.

    If you don't see the Start a New Flutter Project option, you may not have installed the Flutter plugin correctly.

    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.

    creating Flutter app Creating a Flutter application.

    The second dialog box has four fields: Project Name, Flutter SDK Path, Project Location, and Description.

    Flutter app details Details about your new Flutter app.
  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 Flutter 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.

    If you can’t find it, 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.

    finishing your Flutter app The finishing touches on your Flutter app.
  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. So, when you create a Flutter app, the app is usually in a package named com.domainname.somethingorother. The somethingorother part is unique to each of your 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. 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 Android Studio's main window.

    Android Studio's main window may look overwhelming at first.

    Notice two important items near the top of Android Studio's main window below:

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

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

      Android Studio's toolbar Android Studio's toolbar.
  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.
  11. 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.

    Android Virtual Device Start running an Android Virtual Device.

    If the AVD manager is empty — that is to say, if it's not like the manager shown above, which shows a virtual device labeled Pixel API 28 —you have to create an Android Virtual Device.

    Android Virtual Devices don't always start quickly. On a 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.

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

  12. Click the Run icon on Android Studio's toolbar.

    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.

    complete Flutter app Isn't it wonderful?
Congratulations! Your first Flutter 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 Flutter app, but it's a good start.

Ready to learn more? Check out our Flutter Cheat Sheet.

About This Article

This article is from the book:

About the book author:

Dr. Barry Burd holds an M.S. in Computer Science from Rutgers University and a Ph.D. in Mathematics from the University of Illinois. Barry is also the author of Beginning Programming with Java For Dummies, Java for Android For Dummies, and Flutter For Dummies.

This article can be found in the category: