Flutter is a new cross-platform mobile app development framework created by Google. It allows building high-performance native apps for Android and iOS from a single codebase using the Dart programming language. The document discusses Flutter's advantages like reactive views without a JavaScript bridge, native performance through AOT compilation, rich customizable widgets, and hot reload capabilities. It provides a quick overview of setting up Flutter development environments and building a basic "Hello World" app. The presenter demonstrates building a simple counter app widget in both Flutter and React Native. He closes by discussing some use cases for Flutter and pointing to further reading resources.

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

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

3. Telstra as a Technology Company

5. Github.com/telstra

6. dev.telstra.com
TelstraDev portal

7. TelstraDev growing API Family

8. Telstra Connected Things APIs

9. Venture Partner Deals

10. Right tool for the right job

11. Digital Agency
Challenging and rewarding

12. Organised Chaos

13. Dev disruptions

14. Facebook page tab apps

15. 25 Words or less apps

16. Summadayze

17. Drag and Drop designer

18. Interactive games

19. Under da hood

20. Drag and Drop
Yet another 25 words or less
app

21. PhoneGap

22. Appcelerator

23. Unity

24. Best unity project ever

25. Double Peppers Ghost

26. CoronaSDK

27. LUA

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

29. Flutter.io
The new kid on the block

30. Flutter.io

31. 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

32. The History

33. Dart for web

34. 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");
}

35. 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);
});
};

36. Everything is a widget

37. Expressive UI

38. Virtual Dom
Webview
React-native
Flutter

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

40. Moar features

41. First App
Hello World for reals

42. 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

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

44. 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

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

46. 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

47. 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

48. 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>
);
}
}

49. 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'),
),
),
);
}
}

50. Mac Air

51. Demo Time

52. 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

53. Demo Time

54. In closing

55. Be ye warned

56. First Use Case

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

58. Cross platform vs Native

59. Further Reading
https://devstev.es/ReactFlutter

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

61. dev.telstra.com
TelstraDev portal

62. Github.com/telstra
SDKs / Code Samples

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