Let's learn the Dart language as JS developers: We dive into OOP, classes, inheritance, and mixins, asynchrony, callbacks, async/await and streams.

Why would you want to learn Flutter and Dart? Dart vs JavaScript - the pros and cons Variables and types in the Dart language

// Heads up! This is some nasty Dart code!
var num = 0; // Dart will implicitly give this variable an int type. var, let 👉var
int myInt = 3; // this is an explicitly typed variable
final double pi = 3.14; // const 👉final, static and const, more info below

myInt = 3.2; // will throw an error as 3.2 is not an integer
pi = 3.2; // will throw an error as pi is marked with final

String name = "Mark";

A few words about final, static and const

Writing your first Dart language function

// return type, function name, parameters with their types and names
double addDoubles(double a, double b) {
    return a + b;
}

addDoubles(3.2, 1.4); // => will return 4.6

void main() {
    print(addNumbers(2, 3));  // console.log() 👉print()

    // this function does not return anything!
}

Control flow statements - if, for, while, etc.

int age = 20;

if(age >= 18) {
    print("here’s some beer! 🍻");
} else {
    print("🙅‍♂️sorry, no alcohol for you...");
}

// let’s count from 1 to 10!
// p.s.: notice the `int i`
for (int i = 1; i <= 10; i++) {
    print("it’s number $i");   // string interpolation: ${} 👉 $ (for variable names)
}

// while loops:
// please don’t run this snippet, it will probably crash or run out of resources...
while("🍌" == "🍌") {  // oh, and forget ===, you don’t need it in Dart!
    print("Hey! 👋 I’m a banana!");
}

Arrays and objects

Array 👉List

// the usual, implicitly typed, [] syntax
var continents = ["Europe", "North America", "South America", "Africa", "Asia", "Australia"]; 
continents.add("Antarctica");  // .push() 👉 .add()

// please note that when throwing in multiple types of data, Dart will fall back to the `dynamic` type for your list:
var maybeBanana = [1, "banana", null, 3.44];

// the `new List()` syntax, with a dynamic length:
// note the List<T> syntax: you need to pass in the desired value type between the <>s
List<int> someNiceNumbers = new List();
someNiceNumbers.add(5);

// fixed-length list:
List<int> threeNiceNumbers = new List(3); // this list will be able to hold 3 items, at max.

// dynamic list with the new List() syntax:
List<dynamic> stuff = new List();
stuff.add(3);
stuff.add("apple");  // this is still totally legit because of the <dynamic> type

Object 👉Map

// the usual { ... } literal
var notesAboutDart = {
    objects: "hey look ma! just like in JS!",
    otherStuff: "idc we’ll look into them later"
};

// the new Map constructor
Map notesAboutJs = new Map();

// … and of course, you can explicitly type Maps!
// typed Map literal:
Map<String, int> prices = <String, int>{
    "apple": 100,
    "pear": 80,
    "watermelon": 400
};

// typed Map constructor:
final Map<String, String> response = new Map<String, String>();

Imports and exports

import 'dart:math';  // import math from “math” 👉import “math”;

// Importing libraries from external packages
import 'package:test/test.dart';  // import { test } from “test” 👉import “test/test”;

// Importing files
import 'path/to/my_other_file.dart';  // this one is basically the same

// Specifying a prefix
import 'dart:math' as greatMath;

// /dev/a.dart
String coolDudes = "anyone reading this";
String _hiddenSuffix = “...with sunglasses on 😎";

// /dev/b.dart
import "./b.dart";

print("cool dudes: $coolDudes"); // => cool dudes: anyone reading this
print("cool dudes: $coolDudes $_hiddenSuffix") // => will fail as _hiddenSuffix is undefined in this context

A quick intro to OOP and classes

• Encapsulation: Group variables (properties) and functions (methods) into units called objects.This reduces complexity and increases reusability.
• Abstraction: You should not be able to directly modify the properties or access all methods - instead, think of writing a simple interface for your object. This helps you isolate the impact of changes made inside the objects.
• Inheritance: Eliminate redundant code by inheriting stuff from another object or class. (Dart achieves this with mixins - we’ll look into concrete examples later). This helps you keep your code base smaller and more maintainable.
• Polymorphism: Because of the inheritance, one thing can behave differently depending on the type of the referenced object. This helps you in refactoring and eliminating ugly ifs and switch/case statements.

Real-Life Dart Examples

class Developer {
  final String name;
  final int experienceYears;

  // Constructor with some syntactic sugar
  // a constructor creates a new instance of the class
  Developer(this.name, this.experienceYears) {
    // The code you write here will run when you construct a new instance of the Developer class
    // e.g. with the Developer dev = new Developer(“Daniel”, 12); syntax!
    // Notice that you don't have to explicitly type
    // this.name = name;
    // one by one. This is because of a Dart syntactic sugar
  }

  int get startYear =>
      new DateTime.now().year - experienceYears; // read-only property

  // Method
  // notice the `void` as this returns nothing
  void describe() {
    print(
        'The developer is $name. They have $experienceYears years of experience so they started development back in $startYear.');
    if (startYear > 3) {
      print('They have plenty of experience');
    } else {
      print('They still have a lot to learn');
    }
  }
}

void main() {
  Developer peter = new Developer("Peter", 12);
  Developer aaron = Developer("Aaron", 2); // in Dart 2, the new keyword is optional
  peter.describe();
  // this well print this to the console:
  // The developer is Peter. They have 12 years of experience so they started development back in 2008.
  // They have plenty of experience.

  aaron.describe();
  // =>
  // The developer is Aaron. They have 2 years of experience so they started development back in 2018.
  // They still have a lot to learn.
}

Inheritance and mixins in Dart

// notice the extends keyword.
// we refer to the Developer class we defined in the previous snippet
class RisingStackEngineer extends Developer {
  final bool cool = true;
  String sunglassType;
  
  RisingStackEngineer(String name, int experienceYears, this.sunglassType)
      : super(name, experienceYears); // super() calls the parent class constructor
  
  void describeSunglasses() {
    print("$name has some dope-ass $sunglassType-type sunglasses.");
  }
}

void main() {
  RisingStackEngineer berci = RisingStackEngineer("Bertalan", 300, "cool");
  berci.describe(); // .describe(); is not defined on the RisingStackEngineer class directly - it’s inherited from the Developer class. We can still use it though!
  berci.describeSunglasses(); // => Bertalan has some dope-ass cool-type sunglasses
}

class Keyboard {
  int numberOfKeys = 101;
  void describeKeyboard() {
    print("The keyboard has $numberOfKeys keys.");
  }
}

class WalkingKeyboard extends Developer with Keyboard {
  // ...
}

Asynchronous programming in the Dart Langauge

// Promise 👉 Future
// the method return type is an asynchronous void
Future<void> printWithDelay(String message) {
  // Future.delayed delays the code run with the specified duration
  return Future.delayed(Duration(seconds: 1)).then((_) {
    print(message);
  });
}

void main() {
  print("hey hi hello");
  printWithDelay("this message is printed with delay");
}

// notice that you have to add in the async keyword to be able to await a Future
Future<void> printWithDelay(String message) async {
  await Future.delayed(Duration(seconds: 1));
  print(message);
}

void main() {
  print("hey hi hello");
  printWithDelay("this message is printed with delay");
}

Streams in the Dart Language

// this is an imaginative stream that gives us an integer every one second
final exampleStream = NumberCreator().stream;
// e.g. 1, 2, 3, 4, ...

// print the data received from the stream
final subscription = exampleStream.listen((data) => print(data););

// same code but with a broadcast stream. Notice the .asBroadcastStream at the end!
final exampleStream = NumberCreator().stream.asBroadcastStream;

// and you’ll be fine adding multiple listeners
final subscription = exampleStream.listen((data) => print(data););
final subscription2 = exampleStream.listen((data) => print(data););

final advancedSubscription = exampleStream.listen(
    // this runs when new data is received
    (data) {
        print("data: $data");
    },

    // handle errors when one occurs
    onError: (err) {
        print("error: $err");
    },

    // do not cancel the subscription when an error occurs
    cancelOnError: false,

    // when the stream finishes, run some code.
    onDone: () {
        print("done!");
    }
);

advancedSubscription.pause(); // pause the subscription
advancedSubscription.resume(); // resume the subscription
advancedSubscription.cancel(); // remove/cancel the subscription

• Isolates and event loops
• Dart Futures
• Dart Streams
• Async/Await
• Generators

Summing our beginner Dart tutorial up