Introduction to Flutter and Dart Code

1. Important points about Dart and Flutter code
2. Exploring “main.dart”

This lab introduces some of the basic elements of Flutter and Dart.

Important points about Dart and Flutter code

The Flutter SDK is written in the Dart programming language. Dart is an object-oriented language created by Google.

Dart looks and behaves like a combination of Python and Java. You will become familiar with Dart throughout the semester, but hopefully you have enough experience with programming by now to pick up the language.

Here are a few important points about Dart and Flutter code you should know before we proceed:

• Dart is object-oriented and uses many classes. To create Flutter apps, you will be defining classes, extending super classes, and using built-in classes from the Flutter framework.
• Dart has everything you expect from a programming language: variables, if-else statements, loops, function definitions
• Dart is statically-typed like Java, meaning that you have to specify the type of a variable when you define the variable.
• Statements in Dart end with a semicolon like in Java.
• A single file in Dart can contain multiple functions and class definitions. Each class does not need it’s own file.
• You can have your code spread across multiple Dart files. You import other files and libraries you use at the top of a source file.
• The basic building blocks of all Flutter apps are called widgets. Widgets are Dart classes that specify the elements of the mobile app’s user interface. Buttons, pictures, text, sliders, checkboxes, and search boxes are all examples of widgets.

Exploring “main.dart”

We will take a look at the file lib/main.dart in a newly-created Flutter project.

The line import 'package:flutter/material.dart'; is a Dart statement (note how it ends with a semicolon) that imports Flutter classes for use in the source file.

The following code block is the starting point for the Flutter app when it runs on a device. The main() method.

void main() {
  runApp(const MyApp());
}

• runApp(<WIDGET>) is a built-in Flutter function that tells Flutter that your mobile app starts by instantiating and showing the specified <WIDGET> class.
• MyApp is defined just below in the source file. It is a Widget. The expression MyApp() is calling the MyApp class’s constructor. The const keyword will be described later.

Use the following diagram to help organize the classes/widgets that build the screen:

You should see three classes defined in main.dart: MyApp, MyHomePage, and _MyHomePageState. These classes are used to draw what you see on your device’s screen. We will talk about what these classes do and how they are specified later. For now, I want you to observe a few things:

• These classes extend a built-in Flutter Widget class. StatelessWidgets and StatefulWidgets are the building blocks of your Flutter application.
• The classes are enclosed by squiggly braces, e.g., class MyApp extends StatelessWidget { ... }
• You see methods named build(...) in both MyApp and _MyHomePageState. These build methods return a Widget class, and this is where the actual “drawing” of things on the screen takes place.

If you look closely in the build() method of MyApp, you can see a reference to the MyHomePage widget. The MyHomePage widget references the _MyHomePageState class. The building-blocks of a Flutter application, like most GUI libraries, follows a tree-structure. There is a “root” widget that represents the app on the screen – in this case MyApp. MyApp specifies some global information about your app, including the app’s title and which theme to use (the theme optionally specifies a color scheme, fonts, and other things).

MyApp “contains” the MyHomePage widget as a child. This widget references _MyHomePageState, which actually draws things on the screen. The build(...) method in _MyHomePageState is what is actually specifying the things you see on the screen.

• You have an AppBar widget at the top of the screen that shows the title of the app.
• You have an “invisible” Center widget that tells Flutter to put its contents in the center of the screen.
• Inside the Center widget you have an invisible Column widget that allows you to stack UI elements on top of another.
• Inside the Column, you have two Text children that render the text you see on the screen.
• There is a FloatingActionButton that “floats” above the screen at the button that you can press and that invokes the _incrementCounter method (defined at the beginning of the class) when pressed.

A lot of this is probably overwhelming, and that’s okay at this point. We will get into it all. The most important thing to start to orient in your mind is that:

• Flutter applications are built using widgets.
• Widgets are nested within one another to draw and position things on the screen.
• The source code has a lot of nesting that mirrors the nested Widgets in the app.