What is Flutter?
•
Native Cross-Platform
•
One Programming Language and Codebase
•
SDK is the tools to compile the code to native machine code and develop with ease (SDK is set of tools)
•
Framework provides re-usable UI building blocks like TextFields, Text, etc (Framework provides set of features)
•
Object-Oriented & Strongly Typed
•
Syntax is life a mixture of JavaScript, Java, C#
Flutter Architecture
•
UI as Code (This means Widget Tree builds a UI)
•
Everything is a Widget
•
No Drag & Drop
•
No Visual Editor (Code Only)
•
Very Straightforward
•
Embrace Platform Differences
ex) child : Theme.of(context).platform == TargetPlatform.iOS ? CupertinoButton(...) : RaisedButton(...)
Flutter: All about Widgets
•
App is the Root Widget
•
Scaffold holds all the Widget
•
BuildContext is a special type of object which will be passed into the build method automatically, and Flutter will call it whenever it needs to draw something onto the screen
Visible Widgets & Invisible Widgets
•
Input & Output Widgets → Visible
•
Layout & Control Widgets → Invisible
** Container has both properties
Meaning of Adaptive
•
Android
◦
Material Look / Styles
◦
Android Animations / Route Transitions
◦
Android Fonts
•
iOS
◦
Cupertino Look / Styles
◦
iOS Animations / Route Transitions
◦
iOS Fonts
•
One Codebase / Project → One Widget Tree → Different Leaves
** if platform.isIOS → iOS Sub-Tree & Widget
** else → Android Sub-Tree & Widget
Container vs Column / Row
•
Container
◦
Takes exactly one child widget
◦
Rich Alignment & Styling Options
◦
Flexible Width (Child Width or Available Width)
•
Column / Row
◦
Takes multiple child widgets
◦
Alignment but no styling options
◦
Always takes full available height (Column) / width (Row)
How Flutter & Dart Code Gets Compiled to Native Apps?
•
Dart Code using Flutter API (Utility and Widgets)
•
Code Compilation to Native Code on Different Platform by Flutter SDK
•
Flutter does not use platform primitives
ex) RaisedButton() is not changed into UI Button on iOS and Widget Button on Android, but custom implementation → This brings Greater Control, Less Platform Limitations, No Translation Loss
Understanding Flutter Versions
•
Flutter versions change frequently, but does not change all the time
•
Bug Fixes, Small Improvements, 'Behind-the-Scene' Changes, New Features
Flutter Alternatives
•
Flutter vs React-Native vs Ionic (Both are the biggest rivals to Flutter)
•
Flutter: Dart + Flutter
1.
Compiled Native Apps
2.
Does not compile to iOS / Android UI Components (More Customizability)
3.
Cross-Platform (Mobile Apps, Web Apps, Desktop Apps )
4.
From Google
•
React-Native: JavaScript + React.js
1.
Partly Compiled (UI Components) Native Apps
2.
Does compile to iOS / Android UI Components (Less Customizability)
3.
Mostly Mobile Apps (+ React-Native Web)
4.
From Facebook
•
Ionic: JavaScript
1.
WebView-Hosted Web Apps
2.
Does not compiled to iOS / Android because it is WebView
3.
Cross-Platform (Mobile Apps, Web Apps, Desktop Apps)
4.
From Ionic
Widget Life Cycle
•
Stateless Widgets
1.
Constructor Function
2.
Build Function (build())
•
Stateful Widgets
1.
Constructor Function
2.
Init State Function (initState())
•
Need to call initState of super
•
HTTP Request / Load Data from Server / Load Data from Database
3.
Build Function (build())
4.
Set State Function (setState())
5.
Did Update Widget Function (didUpdateWidget())
•
Re-Fetch Data from Database
6.
Build Function (build())
7.
Dispose Function (dispose())
•
Cleaning up data when widget is removed
•
Prevention memory leak
App Life Cycle
•
Inactive
◦
App is inactive, no user input received
•
Paused
◦
App not visible to user (Running in background)
•
Resumed
◦
App is visible and responding to user input
•
Suspending
◦
App is about to be suspended (Exited)
◦
강제 종료 시에 실행 되지 않을 수 있음
Storing Data: Device Storage vs Web Server
•
Device Storage
◦
Only Available in the App / for the User
◦
Data persists across app restarts
◦
Works Offline
•
Web Server
◦
Available for all users across different devices
◦
Data persists across app restarts
◦
Internet connection required