Flutter101

장인수, 우아한형제들
isjang98@gmail.com
Korea
Flutter 101

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&

Agenda
- Flutter & Dart
: Widget & Widget Tree
- Flutter VS. React Native
- Demo
- Q & A

What is Flutter
Flutter is a cross-platform mobile SDK
Developed by
for designing premium native interfaces on
&

What is Flutter
It uses Google’s own language
It is somewhat similar to
as it has an Optional built-in type safety support.

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.

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

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.

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.

About Dart
http://www.etnews.com/201201040069

About Dart
http://www.itworld.co.kr/t/61023/개발자/108761

http://flutter.io
Flutter Architecture

“Everything’s a Widget”
A widget is the basic element of any app created
with flutter.

Everything’s a Widget
Stateless
Stateful

Stateless
- No state
- icon , iconButton, Text

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

class DevfestText extends StatelessWidget {
@override
Widget build(BuildContext context) =>
Text(“Hello World”)
}
Stateless

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

StatelessWidget
constructor
build
StatelessWidget lifecycle

StatefulWidget
constructor
createState
StatefulWidget lifecycle
State
- build()
- initState()
- didUpdateWidget(widget oldWidget)
- dispose()

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

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

+
Title
tab3tab2tab1
AppBar
TabBar
FloatingActionButton

Flutter vs. React Native
- Productivity
- Programming Language
- Performance
- Documentation
- UI Components
- Community

Productivity
1. Hot Reload Support
Flutter React Native
0 0

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.

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’
},
})

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’),
),
),
);
}
}

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”

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.

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.

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

Performance (React Native)
React Native include two parts in its architecture
- JavaScript Language.
- Native components.
React Native uses JavaScript BUT to interact with
native components(ex) OEM Widget, GPS.. Etc)
A JavaScript Bridge is required.

Performance (Flutter)
Flutter doesn’t need a bridge.
It can work much faster.
Therefore, Flutter is able to run animation at 60 fps.

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.

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

Community
React Native’s knowledge base and the developers’ community are larger at the moment.
Nevertheless, Flutter’s community is growing nowadays

Korea
Community
Flutter ReactNative
Github Star 40,436 70,480
User community 3,800 13,700
StackOverflow tag 6,898 40764

Korea
Thank you!
장인수, 우아한형제들
isjang98@gmail.com

Flutter101

More Related Content

What's hot (20)

Similar to Flutter101 (20)

Recently uploaded (8)

Flutter101