SlideShare a Scribd company logo
Flutter
Vladimir Parfenov
Intro
https://flutter.io/
• Native mobile app SDK
• Android / iOS / Fuchsia / Web
• Dart programming language
2
Sample
3
Other frameworks
4
https://medium.com/@openGeeksLab/flutter-vs-react-native-what-you-need-to-know-89451da3
https://blog.novoda.com/react-native-flutter-xamarin-a-comparison/
How Flutter works
https://flutter.io/technical-overview/ 5
Widgets
6https://flutter.io/technical-overview/
Widgets
• != Activity
• != Fragment
• Like View…
• …but unlike View
7https://flutter.io/widgets/
Widgets
8
main() {
runApp(
new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.green,
),
home: new Scaffold(
appBar: new AppBar(
title: new Text("Flutter Demo"),
),
body: new Text("Hello World!"),
),
),
);
https://flutter.io/widgets/
Stateless Widget
• Immutable views (widgets)
• Only one time is built
• Examples: Text, Icon, IconButton, etc.
9https://flutter.io/widgets/
Stateless Widget
10
new Text(
'Hello! How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: new TextStyle(fontWeight: FontWeight.bold),
)
https://flutter.io/widgets/
Stateful Widget
• Still immutable, but…
• Contains State<W>
• Redraw after setState(() -> {}) call
• Examples: AppBar, Scaffold, TextField, etc.
11https://flutter.io/widgets/
Stateful widget
12
UI
Update State
User InputState
State
changes
Update state
e.g. button text
Rebuild widget
and update UI to
reflect changes
loadData() async {
String dataURL = "https://example.com/json";
http.Response response = await http.get(dataURL);
setState(() {
data = json.decode(response.body);
});
}
Async UI
13https://flutter.io/flutter-for-android/#async-ui
Layouts
14
Row
C
o
l
u
m
n
Column Stack
Co
lu
mn
…
ListView
Co
lu
mn
…
GridView
https://flutter.io/tutorials/layout/
Navigation
15https://flutter.io/flutter-for-android/#what-is-the-equivalent-of-an-intent-in-flutter
// Within the `FirstScreen` Widget
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SecondScreen()),
);
}
// Within the SecondScreen Widget
onPressed: () {
Navigator.pop(context);
}
startActivityForResult
16
Map coordinates = await Navigator.of(context)
.push(…);
Navigator
.of(context)
.pop({"lat":43.821757,"long":-79.226392});
https://flutter.io/flutter-for-android/#what-is-the-equivalent-of-startactivityforresult
What does it mean for Android developers?
17
Android SDK Flutter
View / XML Widget
Activity / Fragment ~ State
Intent / FragmentManager (navigation) Navigator
Async UI async / await like JS or Kotlin coroutines
-dpi 1.0x, 2.0x, 3.0x
build.gradle pubspec.yaml
strings.xml static class Strings (till)
String resources
18
class Strings {
static String appName = "Flutter Demo";
static String hotels = "Hotels";
}
new MaterialApp(
title: Strings.appName,
theme: new ThemeData(
primaryColor: Colors.white,
),
home: new HotelsPage(),
),
Life cycle
19https://flutter.io/flutter-for-android/#how-do-i-listen-to-android-activity-lifecycle-events
AppLifecycleState
INACTIVE PAUSED RESUMED SUSPENDING
iOS only onPause() onPostResume()
onStop()
Android only
Platform
specific
code
20https://flutter.io/platform-channels/
Platform specific code
21
class _MyHomePageState extends State<MyHomePage> {
static const platform =
const MethodChannel('samples.flutter.io/battery');
// Get battery level.
String _batteryLevel = 'Unknown battery level.';
Future<Null> _getBatteryLevel() async {
String batteryLevel;
try {
final int result = await platform.invokeMethod('getBatteryLevel');
batteryLevel = 'Battery level at $result % .';
} on PlatformException catch (e) {
batteryLevel = "Failed to get battery level: '${e.message}'.";
}
setState(() {
_batteryLevel = batteryLevel;https://flutter.io/platform-channels/
Platform specific code
22
class MainActivity() : FlutterActivity() {
private val CHANNEL = "samples.flutter.io/battery"
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
GeneratedPluginRegistrant.registerWith(this)
MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result ->
// TODO
}
}
}
https://flutter.io/platform-channels/
Platform specific code
23
@Override
public void onMethodCall(MethodCall call, Result result) {
if (call.method.equals("getBatteryLevel")) {
int batteryLevel = getBatteryLevel();
if (batteryLevel != -1) {
result.success(batteryLevel);
} else {
result.error("UNAVAILABLE", "Battery level not available.", null);
}
} else {
result.notImplemented();
}
}
https://flutter.io/platform-channels/
Type casts
24https://flutter.io/platform-channels/
Architecture
25
• Widget - View (XML, View objects, Storyboard)
• State - Activity / Fragment / ViewController without PAIN
• Presentation / Model - Other OOP / Reactive / Functional
code
Environments
26
Flutter version 0.3.1 beta
Dart 2
Other topics
• Animation and transitions
• Themes
• Serialization
• Assets
• Internationalization
• Gestures
• About Dart
27https://flutter.io/docs/
Fuchsia OS
28
• Open-source OS by Google
• Magenta kernel
• Support’s Android apps
• Java
• Flutter apps are native
Sources
• Documentation - https://flutter.io/docs/
• Flutter - https://github.com/flutter/flutter
• https://github.com/Solido/awesome-flutter
• Plugins - https://github.com/flutter/plugins
• DI - https://github.com/google/inject.dart
• Free course - https://www.udacity.com/course/build-native-
mobile-apps-with-flutter--ud905
29
30
https://github.com/ParfenovVS/flutter_demo_hotels
@Vladimir_Parf
@parfenovvs
Flutter
Vladimir Parfenov
GDG SPB https://t.me/gdgspb
KUG SPB https://t.me/kug_spb

More Related Content

What's hot (20)

PPTX
Flutter
Mohit Sharma
 
PPTX
Flutter
Shyju Madathil
 
PDF
Pune Flutter Presents - Flutter 101
Arif Amirani
 
PDF
Flutter beyond hello world
Ahmed Abu Eldahab
 
PPTX
What and Why Flutter? What is a Widget in Flutter?
MohammadHussain595488
 
PPTX
Introduction to Flutter
Apoorv Pandey
 
PDF
Introduction to Flutter - truly crossplatform, amazingly fast
Bartosz Kosarzycki
 
PPTX
Flutter
Mohit Nainwal
 
PDF
What is flutter and why should i care?
Sergi Martínez
 
PDF
Flutter Tutorial For Beginners | Edureka
Edureka!
 
PPTX
Flutter
Ankit Kumar
 
PPTX
INTRODUCTION TO FLUTTER BASICS.pptx
20TUCS033DHAMODHARAK
 
PPTX
Flutter workshop
Narayan Vyas
 
PDF
The magic of flutter
Shady Selim
 
PPTX
Flutter introduction
SheilaJimenezMorejon
 
PDF
Flutter bus 2018
Ahmed Abu Eldahab
 
PPTX
introduction to flutter ppt - free download
RajatPalankar2
 
PDF
Building beautiful apps using google flutter
Ahmed Abu Eldahab
 
PDF
Getting started with flutter
rihannakedy
 
PDF
Flutter state management from zero to hero
Ahmed Abu Eldahab
 
Flutter
Mohit Sharma
 
Pune Flutter Presents - Flutter 101
Arif Amirani
 
Flutter beyond hello world
Ahmed Abu Eldahab
 
What and Why Flutter? What is a Widget in Flutter?
MohammadHussain595488
 
Introduction to Flutter
Apoorv Pandey
 
Introduction to Flutter - truly crossplatform, amazingly fast
Bartosz Kosarzycki
 
Flutter
Mohit Nainwal
 
What is flutter and why should i care?
Sergi Martínez
 
Flutter Tutorial For Beginners | Edureka
Edureka!
 
Flutter
Ankit Kumar
 
INTRODUCTION TO FLUTTER BASICS.pptx
20TUCS033DHAMODHARAK
 
Flutter workshop
Narayan Vyas
 
The magic of flutter
Shady Selim
 
Flutter introduction
SheilaJimenezMorejon
 
Flutter bus 2018
Ahmed Abu Eldahab
 
introduction to flutter ppt - free download
RajatPalankar2
 
Building beautiful apps using google flutter
Ahmed Abu Eldahab
 
Getting started with flutter
rihannakedy
 
Flutter state management from zero to hero
Ahmed Abu Eldahab
 

Similar to Flutter Intro (20)

PDF
Flutter Forward EXTENDED - Flutter로 앱 개발 입문하기
SuJang Yang
 
PDF
XamarinとAWSをつないでみた話
Takehito Tanabe
 
PPTX
Choose flutter
SamuelAdetunji2
 
PDF
Flutter vs Java Graphical User Interface Frameworks.pptx
Toma Velev
 
PDF
[ABC2018Spring]Flutterアプリ開発入門
Kenichi Kambara
 
PDF
The 2016 Android Developer Toolbox [MOBILIZATION]
Nilhcem
 
ODP
Creating REST Applications with the Slim Micro-Framework by Vikram Vaswani
vvaswani
 
PDF
JavaScript APIs - The Web is the Platform
Robert Nyman
 
PDF
Introduction to flutter
龍一郎 北野
 
PDF
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Robert Nyman
 
PDF
HTML5 tutorial: canvas, offfline & sockets
Remy Sharp
 
PDF
Great Developers Steal
Ben Scofield
 
PPT
AIR 開發應用程式實務
angelliya00
 
PDF
Exploring Async PHP (SF Live Berlin 2019)
dantleech
 
PDF
AFUP Lorraine - Symfony Webpack Encore
Engineor
 
PDF
22Flutter.pdf
dbaman
 
PPTX
All a flutter about Flutter.io
Steven Cooper
 
KEY
Psgi Plack Sfpm
som_nangia
 
KEY
Psgi Plack Sfpm
wilburlo
 
PDF
soft-shake.ch - Hands on Node.js
soft-shake.ch
 
Flutter Forward EXTENDED - Flutter로 앱 개발 입문하기
SuJang Yang
 
XamarinとAWSをつないでみた話
Takehito Tanabe
 
Choose flutter
SamuelAdetunji2
 
Flutter vs Java Graphical User Interface Frameworks.pptx
Toma Velev
 
[ABC2018Spring]Flutterアプリ開発入門
Kenichi Kambara
 
The 2016 Android Developer Toolbox [MOBILIZATION]
Nilhcem
 
Creating REST Applications with the Slim Micro-Framework by Vikram Vaswani
vvaswani
 
JavaScript APIs - The Web is the Platform
Robert Nyman
 
Introduction to flutter
龍一郎 北野
 
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Robert Nyman
 
HTML5 tutorial: canvas, offfline & sockets
Remy Sharp
 
Great Developers Steal
Ben Scofield
 
AIR 開發應用程式實務
angelliya00
 
Exploring Async PHP (SF Live Berlin 2019)
dantleech
 
AFUP Lorraine - Symfony Webpack Encore
Engineor
 
22Flutter.pdf
dbaman
 
All a flutter about Flutter.io
Steven Cooper
 
Psgi Plack Sfpm
som_nangia
 
Psgi Plack Sfpm
wilburlo
 
soft-shake.ch - Hands on Node.js
soft-shake.ch
 
Ad

Recently uploaded (20)

PPTX
Knowledge Representation : Semantic Networks
Amity University, Patna
 
PDF
Viol_Alessandro_Presentazione_prelaurea.pdf
dsecqyvhbowrzxshhf
 
PDF
Pressure Measurement training for engineers and Technicians
AIESOLUTIONS
 
DOCX
8th International Conference on Electrical Engineering (ELEN 2025)
elelijjournal653
 
PDF
Design Thinking basics for Engineers.pdf
CMR University
 
PPTX
Presentation 2.pptx AI-powered home security systems Secure-by-design IoT fr...
SoundaryaBC2
 
PDF
Zilliz Cloud Demo for performance and scale
Zilliz
 
PDF
Basic_Concepts_in_Clinical_Biochemistry_2018كيمياء_عملي.pdf
AdelLoin
 
PPTX
Heart Bleed Bug - A case study (Course: Cryptography and Network Security)
Adri Jovin
 
PDF
MAD Unit - 1 Introduction of Android IT Department
JappanMavani
 
PPTX
2025 CGI Congres - Surviving agile v05.pptx
Derk-Jan de Grood
 
PDF
PORTFOLIO Golam Kibria Khan — architect with a passion for thoughtful design...
MasumKhan59
 
PDF
Biomechanics of Gait: Engineering Solutions for Rehabilitation (www.kiu.ac.ug)
publication11
 
PPTX
Shinkawa Proposal to meet Vibration API670.pptx
AchmadBashori2
 
PPTX
Arduino Based Gas Leakage Detector Project
CircuitDigest
 
PPTX
Solar Thermal Energy System Seminar.pptx
Gpc Purapuza
 
PDF
Water Industry Process Automation & Control Monthly July 2025
Water Industry Process Automation & Control
 
PPTX
美国电子版毕业证南卡罗莱纳大学上州分校水印成绩单USC学费发票定做学位证书编号怎么查
Taqyea
 
PPTX
Introduction to Design of Machine Elements
PradeepKumarS27
 
PPTX
fatigue in aircraft structures-221113192308-0ad6dc8c.pptx
aviatecofficial
 
Knowledge Representation : Semantic Networks
Amity University, Patna
 
Viol_Alessandro_Presentazione_prelaurea.pdf
dsecqyvhbowrzxshhf
 
Pressure Measurement training for engineers and Technicians
AIESOLUTIONS
 
8th International Conference on Electrical Engineering (ELEN 2025)
elelijjournal653
 
Design Thinking basics for Engineers.pdf
CMR University
 
Presentation 2.pptx AI-powered home security systems Secure-by-design IoT fr...
SoundaryaBC2
 
Zilliz Cloud Demo for performance and scale
Zilliz
 
Basic_Concepts_in_Clinical_Biochemistry_2018كيمياء_عملي.pdf
AdelLoin
 
Heart Bleed Bug - A case study (Course: Cryptography and Network Security)
Adri Jovin
 
MAD Unit - 1 Introduction of Android IT Department
JappanMavani
 
2025 CGI Congres - Surviving agile v05.pptx
Derk-Jan de Grood
 
PORTFOLIO Golam Kibria Khan — architect with a passion for thoughtful design...
MasumKhan59
 
Biomechanics of Gait: Engineering Solutions for Rehabilitation (www.kiu.ac.ug)
publication11
 
Shinkawa Proposal to meet Vibration API670.pptx
AchmadBashori2
 
Arduino Based Gas Leakage Detector Project
CircuitDigest
 
Solar Thermal Energy System Seminar.pptx
Gpc Purapuza
 
Water Industry Process Automation & Control Monthly July 2025
Water Industry Process Automation & Control
 
美国电子版毕业证南卡罗莱纳大学上州分校水印成绩单USC学费发票定做学位证书编号怎么查
Taqyea
 
Introduction to Design of Machine Elements
PradeepKumarS27
 
fatigue in aircraft structures-221113192308-0ad6dc8c.pptx
aviatecofficial
 
Ad

Flutter Intro