Fullstack

Flutter

&

Firebase

Workshop

480 mintues

Majid Hajian

mhadaily

Expressive & Flexible UI

Fast Development

Native Performance

Productive

mhadaily

What can we do with Flutter

mhadaily

Credit to: JDominik Roszkowski - https://codepen.io/orestesgaolin/pen/ExVboMY

https://chrome-trex-flutter.netlify.app/#/

Credit to: Joshua de Guzman - https://codepen.io/joshuadeguzman/pen/jObrzJB

https://nike-shop-flutter.netlify.app

Credit to: Zoey Fan - https://codepen.io/zoeyfan/pen/ExVaXGK

https://gooey-edge-flutter.netlify.app

ME.dart

import 'package:flutter/material.dart';
MaterialApp(
   ThemeData(
        name: "Majid Hajian",
        location: "Oslo, Norway",
        description: '''
                Google Developer Expert
        	Passionate Software engineer, 
	        Community Leader, Author and international Speaker
         ''',
        main: "Head of DevRel at Invertase.io",
        homepage: "https://www.majidhajian.com",
        socials: {
          twitter: "https://www.twitter.com/mhadaily",
          github: "https://www.github.com/mhadaily"
        },
        author: {
          Pluralsight: "www.pluralsight.com/authors/majid-hajian",
          Apress: "Progressive Web App with Angular, Book",
          PacktPub: "PWA development",
          Udemy: "PWA development",
        }
        founder: "Softiware As (www.Softiware.com)"
        devDependencies: {
          tea: "Ginger", 
          mac: "10.14+",
        },
        community: {
          MobileEraConference: "Orginizer",
          FlutterVikings: "Orginizer", 
          FlutterDartOslo: "Orginizer",
          GDGOslo: "Co-Orginizer",
          DevFestNorway: "Orginizer",
          ...more
        }));

mhadaily

Find me on the internet by

Head of DevRel at Invertase

Darren

import 'package:flutter/material.dart';
MaterialApp(
   ThemeData(
        name: "Darren Ackers",
        location: "Manchester, UK",
        description: '''
                Lead Developer
        	Community Supporter, 
	        Javascript, Node and Web Developer
         ''',
        main: "Lead Developer at Invertase.io",
        homepage: "https://dacks_developer.com",
        socials: {
          twitter: "https://www.twitter.com/dacks_developer",
          github: "https://www.github.com/dackers86"
        },
        author: {
          Pluralsight: "www.pluralsight.com/authors/darren_ackers",
          Apress: "Supercharging Firebase Extensions",
          PacktPub: "Supercharging Firebase Extensionst",
          Udemy: "Supercharging Firebase Extensionst",
        }
        founder: "\outsauced.io"
        devDependencies: {
          tea: "extensions", 
          mac: "10.14+",
        },
        community: {
          Manchester GDG: "Speaker",
          DevFest London: "Speaker", 
          FlutterCon Turin: "Orginizer",
          ...more
        }));

dacks_developer

Find me on the internet by

Lead Engineer at Invertase

mhadaily

Agenda

 

480 minutes

  • Essential widgets for Flutter
  • Navigator (GoRouter)
  • Get to know Dart
  • REST API
  • Serializing / Deserializing (Freezed)
  • FlutterFire (Firebase)
  • Firebase Extensions
  • State Management & DI (Riverpod)

Consistent Language

  • Object all over
  • optional static types
  • Stream/Future
  • Libraries 
    • dart:core
    • dart:async
    • dart:math
    • dart:html
    • dart:io
    • dart:convert
    • ...

 

 

 

Batteries included

  • package-management by pub 
  • opinionated formatting with dartfmt
  • static code analyzing by dartanalyzer
  • transpiring such as dart2js

Multi-purpose language

  • client-side
  • server-side: RPC 
  • Mobile, web, desktop by Flutter
  • Raspberry-pi

mhadaily

mhadaily

Optional Types

 

String 

bool

int

 

num testnum  = 12;
int int2 = 1;
var x = 1;
double aDouble = 123.32;
String something = '12';
bool isTrue = true;
List<String> aList = ['a', 'b'];
Map<String, dynamic> aMap = {'s': 'v', 'd': 1};

double

num

Map

List

 

dynamic

mhadaily

String Multi-line

String s2 = ''' You can do multilines 

				if you do like this 
                
                this works in Dart
             ''';

mhadaily

String Multi-line

String Interpolation

String s2 = ''' You can do multilines 

				if you do like this 
                
                this works in Dart
             ''';
             
             

var myName = 'Majid';
String s3 = 'my name is $s3';
String s4 = 'my name is ${s3.toUpperCase()}';

mhadaily

Boolean

bool hasValue = true;

if(hasValue) {
	print('True');
}

var name = 'Majid';

if(name != null) {
	print('There is a name!');
}

mhadaily

List (Arrays)

var list = [1,2,3];
assert(list.length == 3); assert(list[1] == 2);
List<String> names = ['majid', 'hajian'];

var list = List(2);
list[0] = 2;
list[1] = 2;       print(list); // [2,2];

var list2 = List();
list.add(1); 
list.add(1); 
// or Chain 
list.add(1).add(1);     print(list); // [1,1];

// Cascade
List<num> list3 = List()..add(3)..add(3);      
print(list); // [3,3];

mhadaily

Functions

void printName(String name){
	print('The name is $name');
}
// omitting types is ok!
printName(String name){
	print('The name is $name');
}

String printNameToFirstLetter(String name){
	print('The name is $name');	
    return name[0];
}

// Fat arrow syntax
String printNameToFirstLetter(String name) => name[0];

// Functions are first-class object, 
['Majid','Hajian'].forEach(printName);

mhadaily

 Named parameters

// Named parameters
someFunction({bool isBold: false, String name: ""}) {
 //...   
}
someFunction(isBold: true);

someFunction({bool isBold: false, required String name}) {
    
}
someFunction(isBold: true, name: 'Majid');

class SomeClassName {
    SomeClassName({this.isBold});
    bool isBold;
}
SomeClassName(isBold: true);

mhadaily

Positional parameters

// Positional parameters
someFunction(bool isBold, [String name]) {
 //...   
	if(name != null){}
}
someFunction(true);

someFunction(bool isBold, [String name]) {
 //...   
 	if(name != null){}
}
someFunction(true, 'Majid');

mhadaily

Type Test

// Type Test `as`, `is, `is!`

Object obj = Person("");

if (obj is Person){
   obj.firstName = 'Majid';
}
// shortway
(obj as Person).firstName = 'Majid';

mhadaily

Loop / Iterate

// Loop

for (var i = 0; i<3; i++) {

}

for (var x in collection) {

}

// Iterable
[].forEach((c)=> print(c));
[].map() // and more

mhadaily

throw, try, catch , finally

// All dart exceptions are unchecked exceptions

try {

	throw Exception('what?!')
 
} on SocketException {

// handle a specific exception

} catch(e){

// no specificed, handle everything

} finally {
	// clean up tasks
}

mhadaily

Class

class Person {
	// if class produces objects that never changes, 
	const Person({this.firstName});
    // another named constructor with inializer list
    factory Person.fromJson(Map<String, dynamic> json) {
      return Person(firstName: json['name'],);
    }
    // variable must be final if const constructor
    final String firstName;
    void printName() {
    	print(firstName);
    }
}
class SomePerson extends Person{
	@override
    printName(){}
}
// abstract and generics
abstract class Something<T>{}

mhadaily

https://zapp.run/

 

Let's Dart today!

mhadaily

mhadaily

mhadaily

Everything is a widget

mhadaily

mhadaily

mhadaily

mhadaily

A lot of built in Widgets

mhadaily

mhadaily

Live CODING

mhadaily

FlutterFire

dart pub global activate flutterfire_cli

Summary

Majid Hajian

mhadaily

Slides and link to source code

 

majid[at]softiware[dot]com

SVG icons credited to undraw.co

Fullstack Flutter & Firebase Workshop (480 minutes)

By Majid Hajian

Fullstack Flutter & Firebase Workshop (480 minutes)

8 hours workshop to start with dart and flutter and firebase

  • 508