Downloaded 14 times
![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); }); };](https://image.slidesharecdn.com/telstradev-flutter-180328025023/75/All-a-flutter-about-Flutter-io-35-2048.jpg)
![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](https://image.slidesharecdn.com/telstradev-flutter-180328025023/75/All-a-flutter-about-Flutter-io-52-2048.jpg)
Uploaded bySteven Cooper
All a flutter about Flutter.io
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.
All a flutter about Flutter.io
- 1. All a flutterabout Flutter.io Steven Cooper - @DeveloperSteve Developer Evangelist - @TelstraDev Talk #114
- 2. @DeveloperSteve Also known asSteven Cooper Seasoned Dev/Ops/CTO /Maker/Geek/Gamer. International Speaker/MC. Hackathon Mentor/Judge. Prev @PayPalDev @XeroAPI
- 3. Telstra as aTechnology Company
- 5.
- 6.
- 7. TelstraDev growing APIFamily
- 8.
- 9.
- 10. Right tool forthe right job
- 11. Digital Agency Challenging andrewarding
- 12.
- 13.
- 14.
- 15. 25 Words orless apps
- 16.
- 17. Drag and Dropdesigner
- 18.
- 19.
- 20. Drag and Drop Yetanother 25 words or less app
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. My last agencyapp https://devstev.es/5gum
- 29. Flutter.io The new kidon the block
- 30.
- 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.
- 33.
- 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 awidget
- 37.
- 38.
- 39. STATEFUL HOT RELOAD!!! Androidand iOS at the same time
- 40.
- 41. First App Hello Worldfor reals
- 42. Assumptions • iOS andAndroid 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 Cloneflutter repo and set path Flutter doctor Update Path
- 44. Setup Flutter editor(s) AndroidStudio 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 Npminstall –g react-native-cli
- 46. Setup react-native editor(s) AndroidStudio 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 runapps 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.
- 51.
- 52. Counter widget class CounterStateextends 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.
- 54.
- 55.
- 56.
- 57.
- 58. Cross platform vsNative
- 59.
- 60.
- 61.
- 62.
- 63. Thank you Steven Cooper- @DeveloperSteve Developer Evangelist - @TelstraDev
Editor's Notes
- #30 World hello
- #33 The first version of Flutter was known as "Sky" and ran on the Android operating system. It was unveiled at the 2015 Dart developer summit which is good news for recruiters who can ask for a minimum 2 years experience and be safe
- #35 Dart is an open-source, scalable programming language for building web, server, and mobile apps. It is an object-oriented, single inheritance language that uses a C-style syntax that is AOT-compiled into native and also transcompiles optionally into JavaScript. It supports interfaces, abstract classes and strong types.
- #36 Dart is an open-source, scalable programming language for building web, server, and mobile apps. It is an object-oriented, single inheritance language that uses a C-style syntax that is AOT-compiled into native and also transcompiles optionally into JavaScript. It supports interfaces, abstract classes and strong types.
- #37 The first version of Flutter was known as "Sky" and ran on the Android operating system. It was unveiled at the 2015 Dart developer summit which is good news for recruiters who can ask for a minimum 2 years experience and be safe
- #38 with composable widget sets, rich animation libraries, and a layered, extensible architecture but in a way that wont eat the battery
- #39 Webview - virtual DOM is immutable React-native – virtual tree of native widgets Flutter – virtual widget tree is now a widget tree
- #42 World hello
- #48 Pubspec.yaml is your package.json
- #52 Demo1 and demo2
- #54 Demotest and RN-counter
- #55 World hello
- #57 Hmilton the official app was built and deployed in 3 months which is really fast for a major app build, Google also uses it for internal facing apps
- #63 react native / lottie (animations) / mixing native code + react-native together