Your First Flutter App: An App From Scratch

At this stage, you’ve added a “Hit Me” button to Bullseye, but it prints a message to the debug console.

print() is an example of a function. A function is like a method, except that it’s not attached to any object. Not being attached to an object means that you can use it without having to name an object first.

In Dart, any time you see a name that starts with a lowercase letter that’s immediately followed by parentheses, such as build() or print() — you’re probably looking at the name of a function or method. The difference is that methods are preceded by the object they belong to when being called, while functions don’t belong to objects and simply appear on their own. Remember though the special case of constructor methods, which kind of look like function calls. You can’t attach them to an object yet because you’re using them to create the object itself.

The print() function takes some text and then prints it in the console, which is the pane in the lower right of VS Code that we saw earlier.

When starting programming, you’ll find print() to be your first debugging tool, which means it’s purpose is to help you figure out what’s going on in your program, and to find the cause of any bugs you may have. You only see its results in the console while you’re developing the app. If you take your app and ship it to the Apple App Store or Google Play Store, print() has no effect. It’s there only to help you out while you’re developing. Although normally you remove print statements before shipping your app.

You can use print() as an indicator to check that specific piece of code is being executed, or to check on some value that your program has stored. In the code you just wrote, you’re using print() to make sure that you run some code when you tap the button. That said, once you feel comfortable working with Flutter and VS Code, you should view print() as a method of last resort as VS Studio Code contains lots of tools to diagnose issues without having to insert an unnecessary lines of code.

So you’ve used print to print a message from the result of a button press. Congratulations — you’ve just written your first interactive code!

But you’re not done yet. Since print() is a debugging tool, users never sees the results. From their point of view, pressing Hit me! still does nothing. You still have to make the button provide a response that the user can see. To do that, you’ll write your first brand new method in the next episode, as we take a look at widget state.

Open up your project in progress or download the starter project. We’re going to create our own method to print out hello. We’ll add this to our class. Firstly, when defining a method, we need to define a return type such as an integer or string for text. In case the method doesn’t return a value, you set the return type void followed by the method name. Okay, let’s create a method named printHello in the GamePageState class.

void printHello()

You can pass values into the parenthesis. For now, we are passing nothing. Now to add code, we put it between braces.

void printHello() {

}

Now we can call the print method.

void printHello() {
  print('hello');
}

At this point, we put our new method in the onPressed property.

TextButton(
  child:
      const Text('Hit Me!', style: TextStyle(color: Colors.blue)),
  onPressed: printHello,
),

Notice that when putting our new method, we didn’t use a parenthesis. We just gave the reference of the method. That is because adding a parentheses will execute the method immediately while building the TextButton widget rather then waiting for the onPressed event.

Now build and run the app. Tap the Hit Me! button, you’ll see a message in the debug console. Welcome to the world of methods.