Flutter101

Flutter101

• 1.
  장인수, 우아한형제들 isjang98@gmail.com Korea Flutter 101
• 2.
  INTRODUCE U L D)G H& A GH / AB B GC B C D -M D A A B / AB B GC B C D ( / AB B G / AB B G C B H LA - DL / ( BA A D . HH AD & G D AD D / AB B GC CH D / AB ,G OPS S T NR&
• 3.
  Agenda - Flutter &Dart : Widget & Widget Tree - Flutter VS. React Native - Demo - Q & A
• 4.
  What is Flutter Flutteris a cross-platform mobile SDK Developed by for designing premium native interfaces on &
• 5.
  What is Flutter Ituses Google’s own language It is somewhat similar to as it has an Optional built-in type safety support.
• 6.
  Benefits of usingFlutter High-velocity development With features like Hot Reload, Helps you quickly build UIs, add new features, & fix bugs. Expressive & flexible designs Flutter comes with a modern reactive framework along with rich set of widgets, animation libraries & a layered extensible architecture.
• 7.
  Benefits of usingFlutter Access native feature and SDKs Make your app livelier with platform APIs, 3rd party SKDs & native code Flutter allows you to reuse your existing Java, Swift & Obj*C code, and access native features and SDKs on Android & iOS Create high-quality experiences Create superior experiences across devices & platforms with portable, GPU-accelerated renderer & high-performance, native ARM code runtime
• 8.
  Who is flutterfor ? - Designers converge on a brand-driven experience on Android and iOS - Prototypers enjoy a high-fidelity and fast way to build working prototypes. - Developers benefit from fantastic developer tools, an easy-to-use language, a rich set of widgets and great IDE support. Flutter frees up valuable time for working on features and delightful experiences.
• 10.
  About Dart 2011. 10Dart 1 2018.2 Dart 2 Dart is a general-purpose programming language originally developed by Google and later approved as a standard by Ecma (ECMA-408) It is used to build web, server, and mobile applications. Dart is an object-oriented, class defined language[9] using a C-style syntax that transcompiles optionally into JavaScript. It supports interfaces, mixins, abstract classes, reified generics, static typing, and a sound type system.
• 11.
  About Dart http://www.etnews.com/201201040069
• 12.
  About Dart http://www.itworld.co.kr/t/61023/개발자/108761
• 13.
  About Dart
• 14.
  http://flutter.io Flutter Architecture
• 15.
  “Everything’s a Widget” Awidget is the basic element of any app created with flutter.
• 16.
  Widget Tree
• 17.
  Everything’s a Widget Stateless Stateful
• 18.
  Everything’s a Widget Stateless -No state - icon , iconButton, Text
• 19.
  Everything’s a Widget StatefulWidgets - Widget changes depending on state - Checkbox, Radio, Form, TextField - State stored in State Object - When the state of the widget changes, Call the setState() to rerending the widget - Dynamic widget which has its own property - Those properties are known as a state - setState() method is used to update that state
• 20.
  class DevfestText extendsStatelessWidget { @override Widget build(BuildContext context) => Text(“Hello World”) } Stateless
• 21.
  class Counter extendsStatefulWidget { Counter({ Key key}) : super(key: key); @override _CounterState createState() => new _CounterState(); } class _CounterState extends State<Counter> { int _counter = 0; void _increment() { setState(() { _counter++; }); } @override Widget build(BuildContext context) => Text(“Current Count : ” + _counter) } Stateful
• 22.
  StatelessWidget constructor build StatelessWidget lifecycle
• 23.
  StatefulWidget constructor createState StatefulWidget lifecycle State - build() -initState() - didUpdateWidget(widget oldWidget) - dispose()
• 24.
  Time Flutter decidesto render our app on device New instance of App widget created, Displaying ‘0’ on the screen. User presses increment button Flutter decides to rerender out app, and Creates a new instance of App New instance of App shows ‘0’ on the screen Our App Current Count : 0 Our App Current Count : 1 Our App Current Count : 1 Our App Current Count : 1 Our App Current Count : 0 Our App Current Count : 0 Stateless Widgets
• 25.
  Time Flutter decidesto render our app on device New instance of App widget created,. App widgets ‘createState’ method called, Resulting ‘AppState’ gets cached User presses button, increments Counter by 1. Flutter rerenders due to ‘setState’ call New instance of App created, still using data from original AppState Our App Our App Current Count : 1 Our App Current Count : 1 Our App Our App Our App Our App Current Count : 0 Stateful Widgets
• 26.
  + Title tab3tab2tab1 AppBar TabBar FloatingActionButton
• 27.
  Flutter React Native
• 28.
  Flutter vs. ReactNative - Productivity - Programming Language - Performance - Documentation - UI Components - Community
• 29.
  Flutter vs. ReactNative Productivity 1. Hot Reload Support Flutter React Native 0 0
• 30.
  Flutter vs. ReactNative Productivity 2. Code Structure This aspect is completely different in Flutter & React Naitve Flutter doesn’t separate data, style, and templates. When using Flutter, you can save time by eliminating the necessity to switch from design mode to code and vice versa.
• 31.
  import React, {Component } from 'react'; import { Text, View } from 'react-native'; export default class HelloWorldApp extends Component { render() { return ( <View style={styles.container}> <Text>Hello world!</Text> </View> ); } } const styles = StyleSheet.create({ container : { flex: 1, backgroundColor: ‘#fff’, alignItems: ‘center’ jystifyContent: ‘center’ }, })
• 32.
  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’), ), ), ); } }
• 33.
  Flutter vs. ReactNative Productivity 3. Installation and Setup The whole installation process appears to be more convenient in Flutter. Flutter > React Native Flutter offers a useful tool for system error inspection It’s “Flutter doctor”
• 34.
  Flutter vs. ReactNative Productivity 4. IDE Support React Native > Flutter React Naitve is supported by almost every available IDE. Flutter is supported by Android Studio, IntelliJ IDEA and VS Code.
• 35.
  Flutter vs. ReactNative Productivity 5. API React Native provides native interface for Wi-FI, Geolocation, NFC Payment, Camera and BT Flutter is developing by a lot of developers. So Flutter is winner or loser depends on how fast release & how good they are.
• 36.
  Flutter vs. ReactNative Programming Languages React Native utilizes JS(Java Script) Flutter does’nt appear to be in the winning position here. Because Flutter uses a losser-known language called Dart
• 37.
  Performance (React Native) ReactNative include two parts in its architecture - JavaScript Language. - Native components. Flutter vs. React Native React Native uses JavaScript BUT to interact with native components(ex) OEM Widget, GPS.. Etc) A JavaScript Bridge is required.
• 38.
  Performance (Flutter) Flutter vs.React Native Flutter doesn’t need a bridge. It can work much faster. Therefore, Flutter is able to run animation at 60 fps.
• 39.
  Flutter vs. ReactNative Documentation (Flutter) Google Team already knows how to write & developer support & understandable and detailed documentation for their frameworks and programming language. React Native also has a general documentation. But Also depends on external dev kits documents.
• 40.
  Flutter vs. ReactNative UI Components - Flutter provides in built UI elements called widgets in place of native ones. https://flutter.io/widgets/ - It can be easily customized. - Flutter has widgets for every popular mobile platform as well as platform-independent widgets Nevertheless, React native is a far greater number of external UI Kits. react native external UI Kits
• 41.
  Flutter vs. ReactNative Community React Native’s knowledge base and the developers’ community are larger at the moment. Nevertheless, Flutter’s community is growing nowadays
• 42.
  Korea Flutter vs. ReactNative Community Flutter ReactNative Github Star 40,436 70,480 User community 3,800 13,700 StackOverflow tag 6,898 40764
• 43.
  DEMO Korea
• 44.
  Korea Thank you! 장인수, 우아한형제들 isjang98@gmail.com
• 45.
  Q&A Korea