Dart

Dart Introduction

Module Still Under Development

# Welcome to the MAD9135 Hybrid

Your Hybrid work this semester will all be about the Dart programming language.

You will have assignments that are spread out through the first 9 weeks of the semester. All the lessons and exercises can be completed at your own pace, when you choose to do the work, as long as you submit each assignment by it's deadline.

# Resources

The official Dart website (opens new window).

Online Dart testing site DartPad (opens new window).

# Dart Background

Dart is a strongly-typed programming language created by Google back in 2010 with the original intent of replacing JavaScript as the primary language for web development in the browser.

Web Developers said nope.

A few years later they came up with the idea of creating the Flutter Framework as a single code base for building Android, iOS, web, and desktop applications. Dart became the logical choice to use as the one language for the Flutter Framework.

In the second half of this semester we will be using Dart to build iOS and Android apps using the Flutter Framework.

# Using Dartpad

The Dartpad website (opens new window) is an online editor that you can use to write Dart code and test it directly in the browser. It can be used for testing Dart applications as well as Flutter applications.

You will need to log in to the DartPad website using your GitHub credentials.

Once you are logged in you will be able to save the code that you write directly as GitHub Gists, as well as, edit those Gists directly from the DartPad site. Additionally you can Fork a Gist and create alternate versions of your code.

# Dart Setup

To be able to write code outside of DartPad you will need to install Dart on your computer or the Flutter framework, which will include Dart.

You will also need to add the Flutter and Dart extensions in VSCode. Both the extensions are written by Dart Code.

To install Dart on its own you should use HomeBrew. Dart standalone install reference (opens new window). In your Terminal, assuming that you installed HomeBrew in the first year, type these two commands:

brew tap dart-lang/dart
brew install dart

1
2

If you want to skip the HomeBrew install and just install Dart by installing the Flutter framework, follow the instructions here - https://docs.flutter.dev/get-started/install (opens new window)

Install the Flutter SDK in your own local folder ~/flutter.

Add Flutter to your $PATH environment variable in your ~/.zshrc file.

Add the Flutter and Dart extensions in VSCode.

If you are using a Mac Silicon MacBook Pro, also run this in the Terminal.

sudo softwareupdate --install-rosetta --agree-to-license

You can follow the rest of the instructions on the above link from docs.flutter.dev to completely set up the Flutter framework. This will also set up Dart. You will need all the Flutter setup steps after the Reading Week so you may as well set it up now.

# Creating a Console App

Once you have Dart (and/or Flutter) installed on your computer, open VSCode and open a folder where you want to want to start building an app with Dart.

Open the Terminal panel and make sure that you are in the correct folder.

dart create -t console my_cli_app

This will create a new folder inside your current one called my_cli_app which will be filled with all the start up code required to create a console-based application.

To run the console app you need to cd into the new folder and run it from there.

cd my_cli_app
dart run

1
2

If you use hyphens in the name, your folder name will have hyphens but the name of the app inside the project settings will use underscores.

# App Structure

When you create a project with Dart or Flutter there will be a file called pubspec.yaml. This is your project settings file. When building projects with NodeJS you use a package.json file for the settings, but for Dart and Flutter it is the pubspec.

YAML files use indenting with the same number of spaces to create parent child relationships. The first few lines of your pubspec.yaml file will look like this:

name: my_cli_app
description: A sample command-line application.
version: 1.0.0

1
2
3

When building a console app, your default first file that will run will be found inside of the bin folder. It will be a .dart file with the same name as your application. Eg: my_cli_app.dart.

Every Dart and Flutter app needs to have an initial method that will be run first. For Dart, this method is called main().

// bin/my_cli_app.dart
import 'package:my_cli_app/my_cli_app.dart' as my_cli_app;

void main(List<String> arguments) {
  print('Hello world: ${my_cli_app.calculate()}!');
}

1
2
3
4
5
6

In the default app, there will also be a lib folder with a Dart file that has a matching name.

// lib/my_cli_app.dart
int calculate() {
  return 6 * 7;
}

1
2
3
4

In the default app, the bin folder file with the main method does an import of the other file. The second file, in the lib folder, has a function called calculate.

When you type dart run the console app you should see:

Building package executable...
Built my_cli_app:my_cli_app.
Hello world: 42!

1
2
3

# Pubspec YAML

When you create a Dart project, and later on a Flutter project, the project settings will be held inside a file called pubspec.yaml.

This is a text file with all the project configuration. It is written with a language called YAML - Yet Another Markup Language. It uses a very simple approach that avoids most of the special characters that JSON requires (brackets, curly braces, parentheses, etc). YAML uses spaces/tabs to create vertically aligned text. Each line in the file is like a new setting for the project or a setting category heading or a new setting within a category.

Everything is made with key value pairs. After the key string put a : colon. Then a space. Then the value.

If the value is a list, then put each value on its own line starting with an indentation, a hyphen, and a space before the value.

Most of the time you can skip adding quotation marks around the key or value. As long as there are no spaces in the value then you don't need quotation marks. If you do need them, use single quotes.

Official website for YAML (opens new window)

Beginners Guide to YAML (opens new window)

# Initial Files

Inside your pubspec.yaml file you will see common things like name, description, version, environment, dependencies, and dev_dependencies. There are many other settings that you can add yourself.

When you create a project for Dart you have to provide a name for the project. This name appears in the pubspec.yaml file as the name.

It will also create a file inside the bin folder that has the same name as the project.

With version 3 of Dart, the convention for an initial file in a project is to name this file after the package (project name). This file must go into the bin folder. It is the file that will hold the void main( ) {} function that automatically is called to start your application.

Then your additional packages, libraries, and files will be in the lib folder and be named after their contents. You should rename the files in your lib folders.

After this is done, we need to tell dart to run the main file.

dart run
dart run bin/main.dart

1
2

We have a couple options. If the file in your bin folder is named the same thing as your project then you can use the first option. If the file with your main() function is called something else, like main.dart then you would use the second option to run it.

Dart guide to the pubspec.yaml file (opens new window) as well as notes about the project structure.

# Hybrid Modules

TODO Hybrid Modules

Parts 1 - 4 each have an exercise that you need to complete and submit.

2. Dart Fundamentals →