Flutter Development

Up and running

Majid Hajian

mhadaily

Updated - Flutter2

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

mhadaily

Agenda

 

 

  • How Flutter Works
  • Essential widgets for Flutter
  • Live coding
  • What is new in Flutter 2
  • How to start
  • What is Flutter
  • Who is using Flutter?

ME.dart

import 'package:flutter/material.dart';

MaterialApp(
   ThemeData(
        name: "Majid Hajian",
        location: "Oslo, Norway",
        description: '''
        	Flutter Google Developer Expert, 
	        Community Leader, Author and international Speaker
         ''',
        main: "Flutter/Dart, PWA, Performance",
        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, 7 hours video course",
          Udemy: "PWA development, 7 hours video course",
        }
        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

mhadaily

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

 

It’s free and open source.

 

mhadaily

Expressive & Flexible UI

Fast Development

Native Performance

mhadaily

Expressive & Flexible UI

Fast Development

Native Performance

mhadaily

Productive

mhadaily

mhadaily

mhadaily

mhadaily

mhadaily

mhadaily

mhadaily

Everything is a widget

mhadaily

mhadaily

mhadaily

mhadaily

A lot of built in Widgets

mhadaily

Set up your Flutter environment

https://flutter.dev/docs/get-started/install

  1. Download and install the Flutter SDK.
  2. Update your PATH with the Flutter SDK.
  3. Install Android Studio with the Flutter and Dart plugins, or your favorite editor.
  4. Install an Android emulator, an iOS simulator (requires a Mac with Xcode), or use a physical device.
> flutter channel
Flutter channels:
  master
  dev
  beta
* stable

flutter create --org com.majidhajian startwithflutter // create project

flutter upgrade // check latest sdk 

flutter doctor // check if evreything is fine


mhadaily

Running "flutter pub get" in startwithflutter...                    1.8s
All done!
.
├── README.md
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── local.properties
│   ├── settings.gradle
│   └── startwithflutter_android.iml
├── ios
│   ├── Flutter
│   ├── Runner
│   ├── Runner.xcodeproj
│   └── Runner.xcworkspace
├── lib
│   └── main.dart
├── pubspec.lock
├── pubspec.yaml
├── startwithflutter.iml
└── test
    └── widget_test.dart

10 directories, 13 files

mhadaily

// pubspec.yaml

name: startwithflutter
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter
    
    
    // RUN flutter pub get

mhadaily

mhadaily

Works with popular tools & platforms

 

LIVE CODING

mhadaily

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 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 s3 = 'my name is ${s3.toUpperCase()}';

mhadaily

Boolean

bool hasValue = true;

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

var name = 'Majid';

if(name) {
	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); 

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
asbtract class Something<T>{}

mhadaily

mhadaily

Summary

mhadaily

FLUTTER / DART   =   EASY & AWESOME

 

 

START TODAY!

flutter.dev/community

fluttervikings.com

mhadaily

Majid Hajian

mhadaily

majid[at]softiware[dot]com

Flutter, Up and Running!

By Majid Hajian

Flutter, Up and Running!

Description: Flutter is a cross-platform, mobile development framework created by Google. With user-centric design in mind, Flutter allows developers to create beautiful native apps on iOS and Android from a single codebase. In this session, I will walk you through the basics of Flutter and Dart such as core concepts, widgets, layout, and more. Last but not least, You will learn the best resources that you will need when developing with Flutter. At the end of the session, you will be able to create your next Flutter project with ease and comfort. This session contains live coding.

  • 2,092