All the things a Web developer needs to know for Fluttering

Dart

  • 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

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

//JSconst dogs = ["Max", "Bella"]; // mutable single-assignment variable                       dogs.push("Cooper"); // ✅                       
dogs = ["Cooper"]; // ❌
//DARTconst 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

//jsvar bones;                       
bones = bones || 1;
console.log(bones); // 1
//dartmain() {
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 dartvar 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

Default values of parameters

//jsvar 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

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

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

Sets

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

//jsvar 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

//jsconsole.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

//dartmain() {                         
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

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

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

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 2: pub get (same as npm install)

Format for importing

import 'package: package directory';

Data types

final, const, list

Flutter FAQ

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

Finding Magic.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store