Your First Flutter App: An App From Scratch

Feb 22 2022 Dart 2.14.1, Flutter 2.5, Visual Studio Code 1.6

Part 1: Get Started with Flutter

8. Add a Widget

Lesson Complete

Play Next Lesson
Next
Save for later
About this episode
See versions

See forum comments
Cinema mode Mark as Complete Download course materials
Previous episode: 7. Create a New Flutter Project Next episode: 9. Conclusion

This video was last updated on Feb 22 2022

When you make a flutter app, you compose that app from widgets.

Widgets determine how an app look and you use them for everything such as buttons, text and they are even used to layout other widgets.

We’ll be diving deeper into widgets in the next part of the course. The thing to keep in mind is that when developing a mobile app, you have two types of widget flavors.

You have the material library which provides the same look and feel as user interface elements on Android.

Cupertino gives you the same look feel on iOS.

You’d think that Flutter interacts with the native operating system to show the widgets, but in fact, Flutter recreates them. This means, you can effectively show Android widgets on iOS and iOS widgets on Android. Granted, you’ll end up with a lot of confused users.

In this course, we’re going to be building an app using the material theme but it will still target both Android and iOS devices. Once you are comfortable with Flutter, you’ll be able to create an app that matches the look and feel of both native environments, but that’s beyond the scope of this course.

Like a typical dart application, a flutter application has a starting point and that’s the main method. We’re going to return a type of MaterialApp. This is a convenience widget used for setting up an app. We’ll use a Scaffold widget that provides the basic visual layout for the app.

[No slide]

Let’s get to work on this.

To get started, open up your new Flutter project. To do this, open Visual Studio Code. Then press File, and then Open. Navigate to the project folder root, and click Open. Now open up the main.dart file in the lib folder. First thing first. Delete everything below the import statement and now you are ready to begin. The import statement allow us to access all the various controls.

First, you need to write an entry point. Type the following:

void main() {

}

This is known as a method. A method encapsulates code that we can call on demand. Some methods return a value. For instance, if you wrote an add method to add two integers, the return method would return an integer. In this case, we’re returning nothing hence the void keyword.

Now to call the runApp method.

runApp()

This method will launch our first widget. You’ll notice a red line underneath our statement. This indicates an error. All statements in dart must end in semi-colon. Think of it like a period in a sentence. Add the following.

runApp();

Even with the semicolon, we still get an error. That’s because the methods requires another widget. This is where we pass in a MaterialApp widget. This is our very widget that gives us some features that are used in lots of apps. Add the following:

runApp(
    MaterialApp(title: 'Bullseye')
);

We’re passing in a title for our app called Bullseye. Notice the single quotes around the text. All text in Flutter uses single quotes instead of regular quotes. Ignore the blue squiggle for now.

Next, we need to provide a Scaffold to our app. This gives us things like an app bar and our basic visual layout.

runApp(MaterialApp(title: 'Bullseye', home: Scaffold(appBar: AppBar(title: const Text('Bullseye')))));

Here you provide a Scaffold with an AppBar, and then title for the app bar, yet your code is kind of hard to read. Thankfully we can format our code with commas. Update it to the following:

  runApp(MaterialApp(
      title: 'Bullseye',
      home: Scaffold(appBar: AppBar(title: const Text('Bullseye'),),),),);

Now save, and we get a formatted set of widgets that is much easier to read. Now lets add a simple text widget. In the scaffold after the appBar, add a body property right after the app bar.

body: const Center(
    child: Text('Hello!!!'),
),

And that’s it. Center widget will center any widget in the middle of the screen. Of course, the Text will display a simple text message. Now to run it. I have Android Studio installed and I want to run this on my pixel device. Down the status bar on the right hand side, select device. From the menu, choose Pixel 4a or the device you installed when you set up Flutter.

There are a few ways to launch the app. The easy way is to simply press F5. Another option is to press the play button. If you press the play tab, you’ll see a Run and Debug button.

Now open gitIgnore and press F5. You’ll get an error message since git doesn’t have a main method. The app doesn’t know where to start. Instead, open main.dart and press F5. It may take a few minutes, but an emulator will appear. Note, that if you see a prompt about Dart Dev Tools, just select Not Now. Once you have your app running, switch back to Visual Studio Code.

Update the text to the following:

child: Text('Hello Bullseye!!!'),

Now save, but your device won’t update. You have a few options. You’ll see there’s a toolbar at the top that allows you to stop, pause or even reload the app. First, you have the Hot reload which is the lightning bolt button. This will reload the VM on the device The good part is that the device won’t lose its state. You’ll use the hot reload throughout this course. It’s one of the coolest parts of working with Flutter. That is, changing your code and instantly seeing the changes on a device.

Unfortunately, the hot reload won’t rerun the main method so in our case, we won’t see the change. We need to use the hot restart. The hot restart button restarts the Flutter app. This will lose our state.

Press the hot restart button. Return back to the app. Look at that - we have an updated app. Nice work