Flutter101
8 likes1,559 views
Flutter 101 introduces Flutter, a cross-platform mobile SDK developed by Google for building native Android and iOS apps using the Dart programming language. It discusses key Flutter concepts like widgets and the widget tree. The document compares Flutter to React Native in areas like productivity, programming languages, performance, documentation, UI components, and community size. It provides an overview of Dart and demonstrates a simple Flutter app. The presentation ends with a demo and Q&A section.
![About Dart
2011. 10 Dart 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.](https://image.slidesharecdn.com/gdgdevfestseoul2018-flutter101-181120123113/85/Flutter101-10-320.jpg)
Flutter101
- 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 Flutter is a cross-platform mobile SDK Developed by for designing premium native interfaces on &
- 5. What is Flutter It uses Google’s own language It is somewhat similar to as it has an Optional built-in type safety support.
- 6. Benefits of using Flutter 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 using Flutter 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 flutter for ? - 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. 10 Dart 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.
- 13. About Dart
- 15. “Everything’s a Widget” A widget is the basic element of any app created with flutter.
- 16. Widget Tree
- 18. Everything’s a Widget Stateless - No state - icon , iconButton, Text
- 19. Everything’s a Widget Stateful Widgets - 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 extends StatelessWidget { @override Widget build(BuildContext context) => Text(“Hello World”) } Stateless
- 21. class Counter extends StatefulWidget { 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
- 23. StatefulWidget constructor createState StatefulWidget lifecycle State - build() - initState() - didUpdateWidget(widget oldWidget) - dispose()
- 24. Time Flutter decides to 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 decides to 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
- 28. Flutter vs. React Native - Productivity - Programming Language - Performance - Documentation - UI Components - Community
- 29. Flutter vs. React Native Productivity 1. Hot Reload Support Flutter React Native 0 0
- 30. Flutter vs. React Native 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. React Native 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. React Native 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. React Native 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. React Native 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) React Native 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. React Native 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. React Native 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. React Native 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. React Native Community Flutter ReactNative Github Star 40,436 70,480 User community 3,800 13,700 StackOverflow tag 6,898 40764
- 43. DEMO Korea
- 45. Q&A Korea