“Hello” from Flutter

A constructor’s parameters

Every constructor call has a list of parameters (usually called a parameter list). In Listing 3-1, each constructor’s parameter list has only one parameter in it. (See Figure 3-7.)

Constructor calls can have many parameters, or have no parameters. Take, for example, the Text call in Listing 3-1. In that code, the parameter "Hello world!" supplies information to Dart — information that’s specific to the Text widget that Dart is constructing. Try changing Text("Hello world!") to Text("Hello world!", textScaleFactor: 4.0). When you save the new code, Android Studio does a hot restart that changes the look of the app in your emulator. (See Figure 3-8.)

Chapter 1 describes the difference between Flutter’s hot restart and hot reload features. Both features apply updates to an app while the app is running. To do a hot restart, simply save your code. To do a hot reload, press the Run icon near the top of Android Studio’s main window.

The constructor call

A note about punctuation

In Dart, you use commas to separate a constructor’s parameters from one another. And, for all but the simplest parameter lists, you end the list with a trailing comma.

Don’t relent — simply indent

Take another look at Listing 3-1, and notice how some of the lines are indented. As a general rule, if one thing is subordinate to some other thing, its line of code is indented more than that other thing. For example, in Listing 3-1, the MaterialApp object contains the Material object, so the home: Material line is indented more than the return MaterialApp line.

Here are two facts to keep in mind:

• In a Dart program, indentation isn’t necessary.
• In a Dart program, indentation is necessary.

Wait! What are those two facts again?

If you change the indentation in a Dart program, the program still runs. Here’s a valid reworking of the code in Listing 3-1.

Dart’s enum feature

An interesting feature of the Dart programming language is hiding inside Listing 3-4. The word Brightness refers to something called an enum (pronounced “ee-noom”). The word enum is short for enumeration. An enum is a bunch of values, like Brightness.light and Brightness.dark.

In Listing 3-4, notice how you refer to an enum’s value. You don’t use a constructor call. Instead, you use the name of the enum (such as Brightness), followed by a period, followed by the unique part of the value’s name (such as light or dark).

Flutter has many other built-in enums. For example, the Orientation enum has values Orientation.portrait and Orientation.landscape. The AnimationStatus enum has values AnimationStatus.forward, AnimationStatus.reverse, AnimationStatus.completed, and AnimationStatus.dismissed.

To find out how to create a new enum, see 7.

Hello from sunny California!

Google announced Material Design at its developer conference in 2014. The first version of this design language dealt mostly with Android devices, but Version 2 embraced custom branding for iPhones and other iOS devices. Flutter’s Material widget runs on iPhones with automatic platform-specific adaptations.

You can run any of this book’s MaterialApp examples on iPhones as well as Android phones, but if you want an iPhone-first design strategy, you can use Flutter’s Cupertino widget collection. Listing 3-5 has an example.

Centering the text (Part 1)

Figure 3-16 looks strange because the words are tucked up against the upper left corner. In this section, I walk you through some steps to diagnose this problem, and to fix it.

1. While the app in Listing 3-6 runs, look on the right edge of Android Studio’s window for a toolbar button with the words Flutter Inspector on it. Click that toolbar button.

   As a result, the Flutter Inspector appears. (See Figure 3-18.)

   

2. In the upper left corner of the Flutter Inspector, look for the Enable Select Widget Mode icon. (Refer to Figure 3-18.) Click that icon.
3. Select the Flutter Inspector’s Widgets tab. (Once again, refer to Figure 3-18.)

4. In the tree of widgets, select Column. (See Figure 3-19.)

   As a result, the device that’s running your app adds highlighting and a little label to the Column widget on the screen. (See Figure 3-20.)

   

   

5. Just for fun, select a few other branches in the Flutter Inspector’s tree of widgets.

   You can determine the boundaries of almost any of your widgets by using this technique.

The highlighting in Figure 3-20 tells you that the Column widget isn’t centered inside of its parent Scaffold widget, and it’s not wide enough to fill the entire Scaffold widget. To fix this, put the Column widget inside of a Center widget. Put the cursor on the word Column in Android Studio’s editor, and then follow the instructions at the start of the earlier “Making Things Look Nicer” section. Listing 3-7 shows you what you get.

LISTING 3-7 Centering the Column Widget

import 'package:flutter/material.dart';
 
main() => runApp(App0307());
 
class App0307 extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Adding Widgets"),
),
body: Center(
child: Column(
children: [
Text(
"Hello world!",
textScaleFactor: 2.0,
),
Text("It's lonely for me inside this phone.")
],
),
),
),
);
}
}

When you save your changes, Android Studio does a hot restart and you see the new-and-improved display in Figure 3-21.

Centering the text (Part 2)

The Text widgets in Figure 3-21 are centered horizontally, but they’re not centered vertically. To center them vertically, you can fiddle with Flutter’s Center widget, but there’s a much easier way.

1. In Android Studio’s Flutter Inspector, select the Column widget.

   The Flutter Inspector’s lower panel displays all the properties of whatever widget you’ve selected.

   Wait! What’s a “property”? Every object has properties, and each property of each object has a value. For example, every instance of Flutter’s Text class has a textScaleFactor property. In Listing 3-7, a constructor call sets a Text instance’s textScaleFactor property to the value 2.0.

   Constructor calls aren’t the only way of setting the properties of objects. In Figure 3-22, the Flutter Inspector’s lower panel shows the values of the Column widget’s direction property, its mainAxisAlignment property, and many other properties. In addition, the two Text children appear in the Flutter Inspector’s lower panel.

   

2. In the lower panel, hover over the Column widget’s mainAxisAlignment property.

   When you do, Android Studio displays a pop-up explaining the mainAxisAlignment property’s meaning. (See Figure 3-23.) The text in this pop-up comes automatically from Flutter’s official documentation.

   A column’s main axis is an invisible line going from the column’s top to its bottom.

   

3. Again in the lower panel, hover over the word start in the Column widget’s mainAxisAlignment property.

   The new pop-up says that you can replace start with any of the values end, center, spaceBetween, spaceAround, or spaceEvenly. (See Figure 3-24.)

   

4. In Android Studio’s editor, add a mainAxisAlignment parameter to the Column widget’s constructor. (See Listing 3-8.)

   LISTING 3-8 Time for an Alignment

   import 'package:flutter/material.dart';
 
main() => runApp(App0308());
 
class App0308 extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Adding Widgets"),
),
body: Center(
child:
Column(mainAxisAlignment:
MainAxisAlignment.center,children: [
Text(
"Hello world!",
textScaleFactor: 2.0,
),
Text("It's lonely for me inside this phone.")
],
),
),
),
);
}
}

   In Listing 3-8, mainAxisAlignment is the name of a parameter, MainAxisAlignment is the name of an enum, and MainAxisAlignment.center is one of the enum’s values.

   For another look at Dart’s enum feature, refer to the “Dart’s enum feature” section earlier in this chapter. And if you hunger for even more, see Chapter 7.

5. Save your editor changes to do a hot restart.

   On the device that’s running your app, the Text widgets are centered horizontally and vertically. (See Figure 3-25.)

This section’s example illustrates aspects of Flutter’s Column widget, which displays things from top to bottom. It should come as no surprise that Flutter has a Row widget, which displays things from side to side. Most facts about the Column widget are also true of the Row widget. (Well, they’re true when you’re lying down instead of sitting upright.)

In addition, Flutter has a ListView widget. The ListView widget displays things either way — from top to bottom or from side to side. In addition, the ListView widget has its own scrolling feature. You can put 100 items on a ListView even though only 20 items fit on the screen. When the user scrolls the screen, items move off the screen while other items move on.

To read about Flutter’s ListView widget, see Chapter 8.

Displaying an image

Words are nice, but pictures are prettier. In this section, you put an image on your Flutter app screen.

1. In Android Studio, start a new Flutter project.

   I named my project app0308, but you don’t have to use that name.

2. In Android Studio’s Project Tool window, right-click the project’s name.

   As a result, a contextual menu appears. (See Figure 3-26.)

   

3. On the contextual menu, choose New ⇒   Directory. (Refer to Figure 3-26.)

   As a result, the New Directory dialog box appears. How convenient!

4. In the dialog box, type the name assets, and then press Enter.

   To be honest, you can name this new directory almost anything you want. But if you don’t name it assets, you’ll confuse other Flutter developers.

5. Check the Project Tool window to make sure that the project tree has a new assets branch. (See Figure 3-27.)

   Seasoned Flutter developers create an images subdirectory of the new assets directory. I won’t bother with that right now.

   

6. Find an image file.

   Search your development computer’s hard drive for an image file. Look for filenames ending in .png, .jpg, .jpeg, or .gif.

   If your File Explorer or Finder doesn’t show filename extensions (such as .png, .jpg, .jpeg, or .gif for image files), refer to the sidebar in Chapter 2 that talks about those pesky filename extensions.

7. In your development computer’s File Explorer or Finder, copy the image file.

   That is, right-click the image file’s name. On the contextual menu that appears, select Copy.

8. Using Android Studio’s Project Tool window, paste the image file into the assets directory.

   That is, right-click the assets branch. On the resulting contextual menu, choose Paste. In the resulting dialog box, type a name for your image file, and then press Enter.

   When I did all this, I named the file MyImage.png, but you don’t have to use that name.

9. Open your project’s pubspec.yaml file.

   More specifically, double-click the pubspec.yaml branch in the Project Tool window’s tree.

   Here’s a fun fact: The extension .yaml stands for Yet Another Markup Language.

10. In the pubspec.yaml file, look for advice about adding assets to your project.

    The advice might look something like this:

    # To add assets to your application,
# add an assets section, like this:
# assets:
# - https://softwarezay.com/storage/epubs/barry-burd-flutter-for-dummies-2020/images/a_dot_burr.jpeg
# - https://softwarezay.com/storage/epubs/barry-burd-flutter-for-dummies-2020/images/a_dot_ham.jpeg

    (In case you’re wondering, the file names a_dot_burr.jpeg and a_dot_ham.jpeg refer to Aaron Burr and Alexander Hamilton. These file names occur many times in Flutter’s official documentation. Flutter is the technology behind the mobile app for the Broadway musical Hamilton.)

    In a .yaml file, a hashtag (#) tells the computer to ignore everything on the rest of the line. So, in this part of the .yaml file, none of the lines has any effect.

11. Delete the hashtags on two of the lines. On the second line, change the name of the image file to the name you chose in Step 8.

    When I do this, my pubspec.yaml file contains the following text:

    # To add assets to your application,
# add an assets section, like this:
assets:
- MyImage.png
# - https://softwarezay.com/storage/epubs/barry-burd-flutter-for-dummies-2020/images/a_dot_ham.jpeg

    I use the name MyImage.png instead of https://softwarezay.com/storage/epubs/barry-burd-flutter-for-dummies-2020/images/MyImage.png because, in Step 5, I didn’t create an images directory.

    I often forget to make the necessary changes in the pubspec.yaml file. Try not to forget this step. When you do forget (and almost everyone does), go back and edit the project’s pubspec.yaml file.

12. Replace all the code in the main.dart file with the code in Listing 3-9.

    Use your own class name and filename instead of my App0309 and MyImage.png names.

    LISTING 3-9 Displaying an Image

    import 'package:flutter/material.dart';
 
main() => runApp(App0309());
 
class App0309 extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("My First Image"),
),
body: Center(
child: Image.asset(’MyImage.png’),
),
),
);
}
}

13. Let ’er rip.

    That is, run the code on a virtual or physical device. The display on the device’s screen looks something like the result in Figure 3-28.

At this point, I want to make one thing perfectly clear: I’m not a narcissist. The reason I use this book’s cover image in Figure 3-28 is that I’m fascinated by recursion. I like having a reference to this book inside of this book.

(Besides, I’m a bit of a narcissist.)

Flutter has an Image class, and the Image class has several different constructors. The Image.asset constructor in Listing 3-9 grabs a file from a place inside your Flutter project’s directory. To grab an image off the Internet, you call a different constructor — the Image.network constructor. To get an image from somewhere on your hard drive (somewhere outside of your Flutter project’s directory), you can call the Image.file constructor. Each of these constructors is called a named constructor. In each case, the stuff after the dot (.asset, .network, and .file) is that particular constructor’s name.