Dart for Beginners
Tags: dart, beginners
Published: 2017-12-05 21:14:28

---
title: Dart for Beginners
published: true
description: The bare-bones basics of Dart.
tags: #dart #beginners
---

I recently wrote an article about Angular, and the differences between writing an Angular app in Dart and in TypeScript.

I managed to find some good stuff related to how to write [TypeScript](https://dev.to/abelagoi/learn-the-basis-of-typescript-to-start-writingangular-87i) code if you want to write an Angular app, but I noticed there were no tutorials for [Dart](https://www.dartlang.org/), so I decided to write one!

## Prerequisites

Before beginning this tutorial, you should [install Dart](https://www.dartlang.org/install) for the operating system that you need. If you don't want to install Dart, try using [DartPad](https://dartpad.dartlang.org/). It's like [Ellie](https://ellie-app.com/) or [JsFiddle](https://jsfiddle.net/) but for Dart.

For this tutorial, I'm assuming that you will run Dart code in checked mode. If I have a dart file named `hello.dart` for example, on the command line I would run my code like this:

```bash
$ dart hello.dart -c
```

"Checked" or "strong" mode in Dart enforces type-checking when compiling and running code. This will be the [standard](https://www.dartlang.org/dart-2.0#strong-mode-and-static-typing) in Dart going forward, so it's best to get a handle for strong mode now rather than later.

## `hello world!`

If you have learned any programming language, you might find Dart's hello world program to be very similar to many other languages:

```dart
void main() {
  print('hello world!');
}
```

In this example, I'm defining a function `main` that returns `void` (nothing), and it calls a `print` function that prints "hello world!" out to the console!

Dart makes it possible for this to be a one-liner using the power of closures ([read here](https://www.dartlang.org/guides/language/language-tour#functions) for more info):

```dart
void main() => print('hello world!');
```

## Dart Basics

Dart has support for [seven different built-in types](https://www.dartlang.org/guides/language/language-tour#built-in-types). It's really easy to use them too:

```dart
void main() {
  String name = 'Bob'; // text
  String apple = '\u{1F34E}'; // one character
  String orange = '\u{1F34A}';
  int numApples = 5; // integer value
  double numOranges = 1.5; // floating point value
  
  print('$name has $numApples $apple and $numOranges $orange');

  bool hasLots = (numApples + numOranges) > 5.0;

  if(hasLots) {
    print('$name has a lot of fruits!!');
  } else {
    print('$name needs more fruits...');
  }
}
```

In this example there's a lot going on. I defined a `String` with the name `name` and a value of `"Bob"`. I also have a couple of unicode characters defined, the numbers of each of the fruits that Bob has, and I'm using string interpolation to print out all of the information.

By prefixing `$` to the name of a variable and putting it directly into a string, I can make Dart print what I want it to print without needing to concatenate the string myself.

I'm also using mathematical [operators](https://www.dartlang.org/guides/language/language-tour#operators) to add two numbers together. There are a number of operators you can use.

Dart also has [flow control statements](https://www.dartlang.org/guides/language/language-tour#control-flow-statements) which allow you to have branching behavior in your code. Statements like `if` and `else` can make your code perform differently depending on the state of different variables. In this example, `hasLots` evaluates as `true`, so the `print` statement that falls within the `if` block is executed, and not the one in the `else` block.

_**Things to try:** change `name` to your own name. Try changing the numbers to where they don't add up to 5. Change either `apple` or `orange` to `"\u{1F953}"` and notice how inaccurate the print statements become. Change each type to `var` and notice that nothing changes._

## Defining Your Own Types

Let's say that you want to design classes that can help you represent shapes. We want to be able to calculate the area and perimeter of two-dimensional shapes.

In Dart, you can start by defining what you want your behaviors to be in the form of a [class](https://www.dartlang.org/guides/language/language-tour#classes):

```dart
class Shape {
  double area() => 0.0;
  double perimeter() => 0.0;
}
```

This is a pretty dumb shape though... It doesn't really do anything. All of the behaviors are zeroed out. In Dart, this is how you would create an **interface**.

Dart doesn't have a special keyword for interfaces. You essentially just create default behavior in a class and then you `@override` it in extending classes.

For example, if I wanted to write a class for circles and rectangles, I could write something like this:

```dart
class Circle implements Shape {
  final double _radius;

  Circle(this._radius); // Circle constructor

  @override
  double area() => PI * pow(this._radius, 2);

  @override
  double perimeter() => 2 * (PI * this._radius);
}

class Rectangle implements Shape {
  final double _height, _width;

  Rectangle(this._height, this._width); // Rectangle constructor

  Rectangle.square(double size) : this(size, size); // alternate constructor

  @override
  double area() => this._height * this._width;

  @override
  double perimeter() => (this._height * 2) + (this._width * 2);
}
```

There's a lot going on here: `Circle` and `Rectangle` both `implements Shape`, meaning that instances of those classes **are** `Shape`s. They each have an `area()` and `perimeter()` method, but they are created differently:

```dart
void main() {
  Shape circle = new Circle(5.0);
  Shape rectangle = new Rectangle(4.0, 3.0);
  Shape square = new Rectangle.square(3.3);

  List<Shape> shapes = [circle, rectangle, square];

  shapes.forEach((shape) {
    print("This shape has an area of ${shape.area()} and a perimeter of ${shape.perimeter()}");
  });
}
```

In this example, the `Rectangle` class has two constructors: the default that takes in a `height` and a `width`, and then another called `square` that sets the `height` and the `width` of the `Rectangle` to the same value.

While the `square` constructor looks as if it's being invoked as a function, it's not really a function. You still have to use the `new` keyword because you're still **instantiating** an object, but it's not a function so it can't be invoked as a function. If you were to remove the `new` keyword, that would cause a compile-time error.

## Wrapping up

I hope this intro was good! If you want to know more about Dart, the [language tour](https://www.dartlang.org/guides/language/language-tour) is going to be the most helpful resource you have. If you want me to get more in-depth about something, let me know in the comments, or ask an #explainlikeimfive question and maybe I can help :)