All the things a Web developer needs to know for Fluttering

Dart

• Semicolons are necessary in dart (they are omitable in js)
• If you call a method from a class which is extending another class the method is first looked up in the class itself and then the extended class is looked up

Override notation: It does not change how the program works it is just flags the compiler that following method is being overridden in the super class (the class that is being extended) this concept is borrowed from java

For example

class Car {                         
void ShowCar() => print("This is Parent's car");                       }             

class Jay extends Car {                         
@override                        
 void ShowCar() {                                               
  print("This JD's car");                         
 }                       
}

Javascript equivalent of Dart syntax

push -> add

var -> var (there is no ‘let’ though)

instanceOf -> is

this -> this

isEmpty -> isEmpty

window.onload(callback) -> main(){}

JSON.parse -> jsonDecode (you will have to import dart:convert)

super: extended class object

promise -> future

npm install -> pub get

You can use ${variableName} even inside double quotes

Constructors don’t exist in dart

‘_ ‘ before a variable makes it private in dart, but they are only library private. If you are inside the library you can both read and mutate private variable but you can’t mutate a private variable outside the library it was instantiated

In Javascript we can’t compare two object (it just checks memory location)but in dart it is simply == and to check memory location use identical(obeject1,object2)

Final: you can use ‘add’ but can’t re initialize it

final maleDogs = ["Milo"]; // mutable single-assignment variable                         maleDogs.add("Cooper"); // ✅                         
maleDogs = ["Cooper"]; // ❌

Cons in JS vs Dart

//JS
const dogs = ["Max", "Bella"]; // mutable single-assignment variable                       dogs.push("Cooper"); // ✅                       
dogs = ["Cooper"];  // ❌
//DART
const femaleDogs = ["Luna", "Bella"]; 
// compile time constant                         femaleDogs.add("Winona"); // ❌                         
femaleDogs = ["Winona"]; // ❌   
                                              
// alternative const syntax without assignment                         walkingTimes(const [7, 9, 11]);  // ✅                         walkingTimes(const [DateTime.now()]);  // ❌

In dart const is completely immutable but in js you can still use push()

Default Assignment

default value of 1 if bones is falsey (in Javascript) or null (in Dart).

//js
var bones;                       
bones = bones || 1;                       
console.log(bones);  // 1
//dart
main() {                         
var bones;                         
bones ??= 1;  // OR: bones = bones ?? 1                         print(bones);  // 1                       
}

Destructuring assignment

// js                  
                             
var [dog, owner] = ["Max", "Frank"];                       console.log(dog);  
// Max                       
[owner, dog] = [dog, owner];                       
console.log(dog);  // Frank
Not supported by dart
var amountOfMeals = 0 / 0, // NaN

In Dart, undefined values are null. Expressions in conditionals may only be boolean.

In Dart, 'Rocky' - 2 is an error – not NaN 🤔 Fortunately Dart didn't pick up Javascript's 💩

Function literals

exactly the same but parenthesis are necessary while in JS they are not

Default values of parameters

//js
var greet = (name = 'Milo') => `Woof! My name is ${name}`;
//dart
                                            
main() { 
var greet = ({ name = 'Rocky' }) => "Woof! My name is ${name}";                         print(greet());  // Woof! My name is Rocky                       }

Dart requires curly braces for optional arguments. String interpolation is practically the same.

Most methods are same

like the reduce method

The reduce() method executes a provided function for each value of the array (from left-to-right).

numbers.reduce(myFunc);

function myFunc(total, num) {
     return total - num;
}

The reduce() method reduces the array to a single value.

Note: reduce() does not execute the function for array elements without values.

Note: this method does not change the original array.

Variable number of arguments

//js
function exec(...arg){}

Right now, Dart doesn’t support this

… is called the spread operator

The alternative is simply:

// dart                                               
main() {                         
final exec= (List<int> arg) =>   {}                
}

Safe navigation

Name will be returned except when adress and street are both null (in this case null be be returned)

var name = pot.address || pot.address.street || pot.adress.name

we can’t use:

var name = address || pot.address.street || pot.adress.name

as when address will be empty object {} js will say no problem (which will be a problem)

In dart, we make use of safe navigation operator .?

var name = address.?street.?name

Arrays, sets & Objects

Array, and objects are eactly the same with a nice change, to find object length you don’t have toObject.keys(dogObj).lengthrather dogObj.length

Sets

A set is an array that can’t have duplicates, to find length you will use setVariable.size instead of length

in js

var dogSet = new Set(["Lucy", "Cooper", "Zeus"]);

in Dart

var dogSet = { "Lucy", "Cooper", "Zeus" };

Push method in js returns length of the new array, In Dart we have the cascade operator list..add(), which allows us to return the list.

Concatenation: joining

//js
var parks = [1, 2, 3];                       
parks = parks.concat([4, 5], [6, 7]);
// dart                                               
main() {                         
print( [1, 2, 3]..addAll([4, 5])..addAll([6, 7]) ); 
// [1, 2, 3, 4, 5, 6, 7]                       
}

There is a cleaner way using spread

//js
console.log([1, 2, 3, ...[4, 5], ...[6, 7]]); // [1, 2, 3, 4, 5, 6, 7]
// dart                                               
main() {                         
print([1, 2, 3, ...[4, 5], ...[6, 7]]); // [1, 2, 3, 4, 5, 6, 7]                       }

Random in dart

// dart                                               
import 'dart:math';                                               const P1 = [4, 5];                       
final P2 = Random().nextBool() ? [6, 7] : null;                                               main() {                         
print([1, 2, 3, ...P1, ...?P2]); 
// [1, 2, 3, 4, 5] or [1, 2, 3, 4, 5, 6, 7]                       
}

The optional spread operator ...? will only insert the array if it's not null.

Random().nextBool() gives randow bool

first[‘age’] you can’t do first.age

Dart is a statically-typed language but we can use var

//dart
main() {                         
int age = 5;                         
List<String> pets = ["Cooper", "Luna"];                         
var pets2 = <String>["Cooper", "Luna"];                         List<String> pets3 = <String>["Cooper", "Luna"];

For more: https://medium.com/flutter-community/the-ultimate-javascript-vs-dart-syntax-guide-2f7d8ad8bde6

For understanding dynamic vs static: https://www.youtube.com/watch?v=w0jEdcdAUuI

Static: memory persists acros different instance of variable

Promise

The Promise API in Javascript is analogous to the Future API in Dart.

exmple:

// dart                                               
Future<String> dispenseFood() {                         
return Future.delayed(Duration(seconds: 4), () => 'DOG CHOW');                       }                                               
main() async {                         
print('Idle.');                         
String food = await dispenseFood();                         print(food);  // DOG CHOW                       }

Class & prototype extensions

we can change or add prototype method to a variable type (Read Class & prototype extensions in the above mentioned article & and below github page)

jogboms/time.dart

final Duration tenMinutes = 10.minutes;
final Duration oneHourThirtyMinutes = 1.5.hours;
final DateTime afterTenMinutes = DateTime.now() + 10.minutes;
final Duration tenMinutesAndSome = 10.minutes + 15.seconds;
final int tenMinutesInSeconds = 10.minutes.inSeconds;
final DateTime tenMinutesFromNow = 10.minutes.fromNow;

What is BLoC?

BloC is not an alternative to MVC, it is a huge leap, it stands for Business Logic Components, it is a reactive state management library for Flutter.

Flutter has borrowed this idea from react.js

You won’t need to import any plugins or learn any custom syntax. Flutter already comes with everything you need.

The Flutter team and most importantly Devloper comunity have been very good at identifying the best parts of different dev platform and bringing them together in a rethought syntax

Further read: https://www.raywenderlich.com/4074597-getting-started-with-the-bloc-pattern

Widgets

Think of them like react components or web components

Stateless widget

• It extends StatelessWidget
• Cannot be updated once created

Stateful widget

• Extends StatefulWidget.
• It updates when setState is called

how to create one?

Calling setState for Update

• set state is local to that class

How to install flutter package?

Method 1: Add package name with version in pubspec.yaml

Method 2: pub get (same as npm install)

Format for importing

import 'package: package directory';

Data types

final, const, list

Flutter FAQ

What attributes can scaffold take?

appBar (it can take AppBar widget), body

What attributes does AppBar widget take?

title, action

How routing works in Flutter?

It just pushes the widget you will provide inside the builder curly brackets in the history, we can just return a scaffold

How to add a go back button?

Flutter does that for you in the app bar

What is the difference between onPressed and onTap?

The above piece contains aggregation & analysis from following resources. you are aweosme and you are even more awesome if you wrote any of the following articles

• https://proandroiddev.com/flutter-a-hitchhiker-guide-to-stateless-and-stateful-widgets-cc9f9295253b
• https://medium.com/flutter-community/the-ultimate-javascript-vs-dart-syntax-guide-2f7d8ad8bde6