All a flutter about Flutter.io

All a flutter about Flutter.io
Steven Cooper - @DeveloperSteve
Developer Evangelist - @TelstraDev
Talk #114

@DeveloperSteve
Also known as Steven Cooper
Seasoned Dev/Ops/CTO
/Maker/Geek/Gamer.
International Speaker/MC.
Hackathon Mentor/Judge.
Prev @PayPalDev @XeroAPI

Telstra as a Technology Company

dev.telstra.com
TelstraDev portal

Digital Agency
Challenging and rewarding

Drag and Drop
Yet another 25 words or less
app

My last agency app
https://devstev.es/5gum

Flutter.io
The new kid on the block

At a glance
• The advantages of reactive views, with no
JavaScript bridge
• Fast, smooth, and predictable; code compiles AOT
to native (ARM) code
• The developer has full control over the widgets and
layout
• Comes with beautiful, customizable widgets
• Great developer tools, with amazing hot reload
• More performant, more compatibility, more fun

DART vs JS
main() {
}
//Checking for null
var myNull = null;
if (myNull == null) {
print('use "== null" to check null');
}
var zero = 0;
if (zero == 0) {
print('use "== 0" to check zero');
}
function main() {
// Can be used as entry point
}
// but it has to be called manually.
main();
//Checking for null
var myNull = null;
if (!myNull) {
console.log("null is treated as false");
}
var zero = 0;
if (!zero) {
console.log("0 is treated as false");
}

DART vs JS
fn() {
return true;
}
// Async
_getIPAddress() {
final url = 'https://httpbin.org/ip';
HttpRequest.request(url).then((value) {
print(JSON.decode(value.responseText)['origi
n']);
}).catchError((error) => print(error));
}
function fn() {
return true;
}
// Async
_getIPAddress = () => {
const url="https://httpbin.org/ip";
return fetch(url)
.then(response => response.json())
.then(responseJson => {
console.log(responseJson.origin);
})
.catch(error => {
console.error(error);
});
};

Virtual Dom
Webview
React-native
Flutter

STATEFUL HOT RELOAD!!!
Android and iOS at the same time

First App
Hello World for reals

Assumptions
• iOS and Android are set up at CLI
• Android studio installed and is the prod latest ver
• Xcode installed and is the prod latest ver
• IntelliJ idea is installed
• Brew installed the world
• NPM installed the world

Setup Flutter Env
Clone flutter repo and set path
Flutter doctor
Update Path

Setup Flutter editor(s)
Android Studio TerminalVS
• Browse repos
• Search for Flutter
• Invoke View>Command
Palette…
• Type ‘install’, and select
the ‘Extensions: Install
Extension’ action
• Enter dart code in the
search field, select ‘Dart
Code’ in the list, and click
Install
• Select ‘OK’ to reload VS
Code
• Flutter create myapp
• Cd myapp

Setup React Env
Npm install –g react-native-cli

Setup react-native editor(s)
Android Studio TerminalVS
• Browse repos
• Search for react
• Install the extension in VS Code:
• Press Ctrl + Shift + X (Cmd + Shift
+ X on macOS), wait a moment
while the list of available
extensions is populated
• Type react-native and install
React Native Tools
• For more guidance view VS Code
Extension Gallery
• If you haven't already, install
React Native:
• Run npm install -g react-native-cli
to install React Native CLI
• Set up React Native using the
steps detailed on the React
Native getting started
documentation
• Open your React Native project
root folder in VS Code.
• react-native init myapp
• Cd myapp

Create and run apps
flutter create --org com.test.demo myapp
Flutter run -d all
react-native init myapp
react-native run-ios
react-native run-android

Hello World
void main() {
print('Hello, World!');
}
export default class Project extends
Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>
Hello World
</Text>
</View>
);
}
}

Fancy Hello World
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}

Counter widget
class CounterState extends State<Counter> {
int counter = 0;
void increment() {
setState(() {
counter++;
});
}
Widget build(BuildContext context) {
return new Row(
children: <Widget>[
new RaisedButton(
onPressed: increment,
child: new Text('Increment'),
),
new Text('Count: $counter'),
],
);
}
}
export default class App
extends Component<
{},
{
count: number
}
> {
state = {
count: 0
};
render() {
return (
<View style={styles.container}>
<Text>{this.state.count}</Text>
<Button
title="increase"
onPress={() => this.setState({ count: this.state.count + 1 })}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
}
});
https://github.com/ThrowJojo/VanillaCounter

Recent beta 1
https://devstev.es/flutterbeta

Further Reading
https://devstev.es/ReactFlutter

Further Video-ing
https://devstev.es/dartconf18

Github.com/telstra
SDKs / Code Samples

Thank you
Steven Cooper - @DeveloperSteve
Developer Evangelist - @TelstraDev

All a flutter about Flutter.io

Recommended

More Related Content

What's hot (20)

Similar to All a flutter about Flutter.io (20)

More from Steven Cooper (20)

Recently uploaded (20)

All a flutter about Flutter.io

Editor's Notes