DANIEL GRAHAM

FLUTTER
INTRODUCTION
W H AT I S F L U T T E R
• Is a software development kit that allows you to build application for for both 

android and IOS devices

https://flutter.dev/docs/resources/technical-overview
FLUTTER EVERYTHING IS A WIDGET

https://flutter.dev/docs/resources/technical-overview

• New widgets can be built form other widgets.

• UI = F(State)

• Change the state the UI will change to reflect the new state
HOW DOES FLUTTER’S DIFFER FROM
N AT I V E A N D R E A C T N AT I V E A P P R O A C H ?

• Need to maintain two separate code bases.

• OEM Original Equipment Manufacturer Widgets

Crossing the bridge can

H T T P S : / / W W W. Y O U T U B E . C O M / W AT C H ? V = 6 Z P E T B J J I P Q
 F L U T T E R F O R R E A C T N AT I V E
DEVELOPERS

JS/REACT DART

// Dart
// JavaScript main() {
function startHere() {
  // Can be used as entry point }
}

No Predefined Entry Point Has Entry Point

JS/REACT DART

// Dart
console.log('Hello world!');
print('Hello world!');

String name = 'dart'; 
var name = 'JavaScript'; // Explicitly typed as a string.

var otherName = 'Dart'; 
// Inferred string.

// Both are acceptable in Dart.
var name; // == undefined
    var name; // == null
    int x; // == null
1 & any non-null 

Objects == true Only true == true
FUNCTIONS IN DART
DART
REACT

    function fn() { fn() {
        return true;     return true;
      }   }
  // can also be written as
  bool fn() {
    return true;
  }
 ASYNC PROGRAMMING
REACT DART

import 'dart:convert';
class Example {
import 'package:http/http.dart' as http;
   _getIPAddress() {
     const url = 'https://httpbin.org/ip';
class Example {
     return fetch(url)
  Future<String> _getIPAddress() {
       .then(response => response.json())
    final url = 'https://httpbin.org/ip';
       .then(responseJson => {
    return http.get(url).then((response) {
         const ip = responseJson.origin;
      String ip 

         return ip;
= jsonDecode(response.body)['origin']
       });
      return ip;
   }
    });
 }
  }
 
}
 function main() {
   const example = new Example();
main() {
   example
  final example = new Example();
     ._getIPAddress()
  example
     .then(ip => console.log(ip))
      ._getIPAddress()
     .catch(error => console.error(error));
      .then((ip) => print(ip))
 }
      .catchError((error) => print(error));
 
}
 main();
 ASYNC PROGRAMMING
REACT DART

class Example {
class Example {       Future<String> _getIPAddress() async {
    async function _getIPAddress() {         final url = 'https://httpbin.org/ip';
      const url = 'https://httpbin.org/ip';         final response = await http.get(url);
      const response = await fetch(url);         String ip = 
      const json = await response.json(); jsonDecode(response.body)['origin'];
      const data = await json.origin;         return ip;
      return data;       }
    }     }
  }     
  
    main() async {
  async function main() {
      final example = new Example();
    const example = new Example();
    try {       try {
      const ip = await example._getIPAddress();        final ip = 
      console.log(ip); await example._getIPAddress();
    } catch (error) {         print(ip);
      console.error(error);       } catch (error) {
    }         print(error);
  }       }
       }
  main();
 HELLO WORLD
REACT DART
import React from 'react';
import { StyleSheet, Text, View } 
from 'react-native'; import 'package:flutter/material.dart';

export default class App     void main() {
 extends React.Component {       runApp(
  render() {         Center(
    return (           child: Text(
      <View style={styles.container}>
            'Hello, world!',
        <Text>Hello world!</Text>
      </View>             textDirection: 
    ); TextDirection.ltr,
  }           ),
}         ),
      );
const styles = StyleSheet.create({     }
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
import 'package:flutter/material.dart';

    void main() {
      runApp(
        Center(
          child: Text(
            'Hello, world!',
            textDirection: 
TextDirection.ltr,
          ),
        ),
      );
    }
    import 'package:flutter/material.dart';

    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Welcome to Flutter',
          home: Scaffold(
            appBar: AppBar(
              title: Text('Welcome to Flutter'),
            ),
            body: Center(
              child: Text('Hello world'),
            ),
          ),
        );
      }
    }
C R E AT E R E U S A B L E C O M P O N E N T S
R E A C T N AT I V E FLUTTER
class CustomCard extends StatelessWidget {
class CustomCard extends         CustomCard(@required this.index, 
 React.Component { @required this.onPress);
      
    render() {
        final index;
      return (         final Function onPress;
        <View>       
          <Text>          @override
Card {this.props.index}          Widget build(BuildContext context) {
</Text>           return Card(
          <Button             child: Column(
              children: <Widget>[
            title="Press"
                Text('Card $index'),
            onPress={() =>                  FlatButton(
                  child: const Text('Press'),
this.props.onPress(this.props.index)}                   onPressed: this.onPress,
          />                 ),
        </View>               ],
      );             )
          );     ...
    }       // Usage
        }
  }       }       CustomCard(
                  index: index,
  // Usage         onPress: () { 
  <CustomCard onPress={this.onPress}            print('Card $index');
index={item.key} />         },
      )
 R E A C T N AT I V E S

class CustomCard extends StatelessWidget {
        CustomCard(@required this.index, 
@required this.onPress);
      
        final index;
        final Function onPress;
      
        @override
        Widget build(BuildContext context) {
          return Card(
            child: Column(
              children: <Widget>[
                Text('Card $index'),
                FlatButton(
                  child: const Text('Press'),
                  onPressed: this.onPress,
                ),
              ],
            )     ...
          );       // Usage
        }       CustomCard(
      }         index: index,
               onPress: () { 
          print('Card $index');
        },
      )
REACT FLUTTER
    <View
  style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center'
  }} >
 R E A C T N AT I V E
      <Image source={require('./my-icon.png')} />

FLUTTER
 image: AssetImage('assets/background.png'),
body: Image.network(
          'https://flutter.io/images/owl.jpg',
. Check your spaces when working in the YAML file because white space matters!