Your First Flutter App: An App From Scratch

At this point, we’ll start composing our interface with widgets. Flutter comes with three types of widgets. A stateless widget, a stateful widget, and an inherited widget.

The stateless widget is for an element that doesn’t change on the screen such as a label.

A stateful widget does change and keeps track of its own state like a slider or counter.

An inherited widget allows you to share state with other widgets. We won’t be using the inherited widget in this course although you will gain experience with it later in the Flutter learning path.

Each widget comes with a build method. That’s where we customize what appears on the screen. It’s not uncommon to use multiple widgets in your build method. Some widgets allow for a child or children widgets such as column.

If you are new to programming in general and things like methods sound strange. Don’t worry, all will be explained soon. Just follow along with the demo onscreen.

Get started by downloading the sample project for this episode or opening up your project in progress. Open up main.dart. The first thing we’ll do is create a widget to encapsulate the entire app. We’re going to create a stateful widget to encapsulate the game state. Scroll underneath your main method. Now to create a stateful widget.

Type the letters ST. You’ll see a dropdown with a bunch of code completion options. You want to create stateful widget so select the Stateful Widget option. Give it the name GamePage. Now VS Code produces a lot of code. You get two classes. What’s a class? I’m glad you asked.

A class is the definition of an object. Think of a class like a cookie cutter. We use a cookie cutter to create objects in dart. Okay, what’s an object? An object is just a collection of data and methods. When writing code, it’s far easier to think of code as objects versus individual lines of arcane text. Better still, we can pass around objects in our code. Now, each individual object is unique from each other but also belongs to a family of similar objects called classes.

Another way to think of classes is by way of role playing games. In a game like dungeons and dragons, you create your character from a class like a wizard or fighter. Each wizard has abilities unique to their class like casting spells but each instance of the wizard class is entirely different from each other. For instance, Frobozz the Wizard is quite different from Gandalf the Wizard, although both like to wear bathrobes and cast spells.

Back in our demo, Flutter has defined two classes for us. One is your GamePage that is a type of StatefulWidget.

The other is called a GamePageState. You’ll notice there’s an underscore before GamePageState. This lets you know that its a private class. This just means the class should only work with the GamePage class. Dart doesn’t support the idea of public and private so we mark items as private with the underscore. You’ll notice that the GamePageState contains the build method.

We’ll start in the build method. You’ll see that it returns a Container widget. Change that to a Scaffold.

return Scaffold(
    
);

We want to center all our widgets so in the Scaffold’s body property, add a Center widget.

return Scaffold(
    body: Center(

    )
);

Next we want to align all our widgets in a column, so add a Column widget.

return Scaffold(
    body: Center(
      child: Column(
      ),
    ),
);

We have lots of options when working with a Column. One is for alignment. It’d be nice to center align all our widgets, so set the main axis alignment property to center.

return Scaffold(
    body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
        ),
    ),
);

Next we need to add a children property. This property takes an array of widgets. An array is a series of items. For example, a solar array is a collection of solar panels. Our array takes a collection of widget and we’ll declaring them as unchanging using the const modifier.

return Scaffold(
    body: Center(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[

          ],
        ),
    ),
);

Again, if this all new to you, the syntax is going to look really strange. Just embrace the strangeness and follow along. In time, it will all make sense. Now, we’ll add a simple Text Widget.

return Scaffold(
    body: Center(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text('Bullseye'),
          ],
        ),
    ),
);

Now to see this in action. Scroll up to the main method, and in the home property, replace everything with the GamePage widget.

void main() {
  runApp(
    const MaterialApp(
      title: 'Bullseye',
      home: GamePage(),
    ),
  );
}

Now run the app. you get a simple message. But this time, being that the widget code isn’t in the main method, you can change the text and the app will instantly update.

return Scaffold(
    body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Hello Bullseye'),
          ],
        ),
    ),
);

Now, let’s add a little styling to this text using the TextStyle widget. We’ll bold it and give it the color green.

Text('Hello Bullseye',
    style: TextStyle(
        fontWeight: FontWeight.bold, color: Colors.green)),

Finally, lets add an TextButton after the Text.

children: <Widget>[
  const Text('Hello Bullseye',
      style: TextStyle(
          fontWeight: FontWeight.bold, color: Colors.green)),
  TextButton(
    child:
        const Text('Hit Me!', style: TextStyle(color: Colors.blue)),
    onPressed: () {
      print('hello');
    },
  ),
],

We had to make some changes to our code. We will be labeling Text widget as constant. Labeling an item as a constant means it never changes. This makes our apps run better. Don’t worry about constants for now. Now, you’ll notice that the TextButton takes a text widget followed by an onPressed event. This is the code that we run when the user taps this TextButton.

If you mouse over the print statement, you’ll see we’re getting a warning. That will print a message to the console. The warning informs us that we shouldn’t include a print statement in production which is a good idea, but we’re just testing for now.

With our app already running, our changes have already been applied. Tap the button and then open up the debug console. You’ll see the hello message printed out. Nice work.