Your First Flutter App: An App From Scratch

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

Part 2: Understand Flutter Widgets

13. Write Dart Code

Episode complete

Play next episode

Save for later
About this episode
See versions

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 12. Build an Interface Next episode: 14. Handle Button Presses

This video Write Dart Code was last updated on Feb 22 2022

At this point, you’ve learned how to create a basic Flutter project and added some code to draw a simple user interface onto the screen, and you’ve seen that Flutter apps are composed of widgets.

We’re crossed off the first item in our todo list. That is, we’ve added a hit me button to the screen. Nice work. Next up, we want to show a popup dialog and to do that, you need some understanding of the Dart programming language.

Dart is a relatively new language, released in 2011 as Google’s answer to Javascript. The language is a C based language with modern set of features such as strong typing, type inference, classes and recently, null safety. If you come from a language such as Swift or Kotlin you’ll feel right at home.

Dart is a flexible language. It is both just in time compiled and ahead of time compiled. This means, you can write it as a scripting language much like Javascript, but you can also compile it to machine language getting native performance. In fact, when we write our code in Flutter, it is just in time compiled on debug mode. This is what allows us to hot reload our app. That is, our changes can been seen in real time. Yet, when we release our app, our dart code is compiled for the platform.

Dart is an object oriented language. If you’re already familiar with Object Oriented Programming and feel comfortable with the Dart code you’ve seen so far - at least from a high-level point of view - feel free to skip this episode.

An “object-oriented” programming language, means that most of the code you’ll write involves objects of some kind. A mobile app, whether written in Swift for iOS, Kotlin for Android, or Dart for Flutter, is essentially made up of objects that can communicate with each other. Many of the objects in a Flutter app are provided by the Flutter framework, for example the TextButton or Text objects that are in your app already. Later on, you’ll find that sometimes you will have to program some objects yourself.

But what is an object, exactly?

Programmers like to group related functionality into objects, each of which has a particular job.

For example, you might have an object whose job is to parse a file, another whose job is to authenticate the user, and a final one whose job is to perform a difficult calculation.

Each object takes care of a specific part of the program. In a full-blown app you will have many different types of objects (tens or even hundreds). Even your small starter app already contains several different objects.

The object you have spent the most time with so far is GamePage - which you can think of as the main “screen” of your app. The Hit Me button is also an object, as is the “Welcome to my first app” text view. In fact, even the text value that you put on the button – “Hit Me!” – is also an object.

Keep in mind that in Flutter, most of the objects you work with are types of widgets. You can kind of use the terms interchangeably in Flutter, but in object-oriented programming, and object really means an instance of a class, whereas widget is a Flutter-specific term for user interface objects.

An object can have both data and functionality. For example, consider the “Hit Me” button in your app.

First, it has some data, such as the widget to display inside, its position on the screen, its width and height, and so on.

Second, it has some functionality, such as the ability to recognize when the user presses on it, highlight itself when pressed, and trigger an action in response.

The thing that provides functionality to an object is commonly called a method. Other programming languages may call this a “procedure” or a“subroutine” or a “function”. A method is simply a function that belongs to an object.

Each class or object has a special method associated with it called a Constructor. A constructor is what you use to create an instance of an object.

If you have an object, you call a method on it by appending a dot and the methodName, and enclosing any arguments you need to send to the method in parentheses. The arguments can have their associated names as prefixes, like fontWeight and color shown here in the Constructor example.

To call a constructor method, you use the name of the class you are trying to create an object of, say TextStyle, and then pass in arguments to the constructor in parentheses.

The concept of methods may still feel a little bit weird to you, so let’t take a look at an example.

You (or at least an object named “You”) wants to throw a party. You clean the room, and put on some music. But you forgot to buy some cookies!

Fortunately, you’ve invited the object named Steve who happens to live next door to a convenience store. So you call a method on Steve asking him to bring you some cookies.

The computer now switches to the object Steve and executes the commands from his buyCookies() method, one by one, from top to bottom.

When the buyCookies() method is done, the computer returns to your throwParty() method and continues with that, so you and your friends can eat the cookies that Steve brought back with him.

The Steve object also has data. Before he goes to the store he has money. At the store he exchanges this money data for other, much more important, data: cookies! After making that transaction, he brings the cookies back over to the party, and you add them to your drink and snack table. If he eats the cookies all along the way, well - your program has a bug.

Another important concept when working with methods is that you’ll often need to change their default behavior by doing what is called an override. This is generally the case when your class is inherited from a parent class. That is, deriving the data and methods in your class from the parent class. For example, Steve object inherited few methods from his parent object.

You’ve seen a few examples already of overriding the build method of a widget, which tells the widget how to draw on the screen. You don’t call the build method yourself; Flutter calls it for you when it renders widgets to the screen. You just need to provide an override to tell Flutter what to do.

The most important thing to remember from this lecture is that objects contain two things. First, data, like the money to buy ice cream with, and second, methods - like the steps involved in buying ice cream

Objects can look at each other’s data - well, to some extent at least. After all, Steve may not approve if you peek inside his wallet.

Asking objects to perform their methods is how you get your app to do things.

Wow - that was a lot to cover. Don’t worry if you don’t get everything right away or if you have trouble understanding some of the syntax; there’s a lot concepts here that may be brand new to you. We’ll review these concepts again and again throughout this course and the rest of the courses in our learning path until they feel like second nature. Again: it’s all about learning via repetition.