Palestra TDC SP 2018 / atualização InovaBRA: Nesta palestra, vamos apresentar o Flutter, o SDK de desenvolvimento multiplataforma do Google para criação de apps com performance de app nativo e visual atrativo, além de mostrar, na prática, os aplicativos gerados para as duas plataformas a partir de um único código fonte. Falaremos ainda da experiência de um trabalho conjunto de desenvolvedores Android e iOS na criação de um app que foi destaque no Google I/O.

1. Flutter: do zero a
publicação
Cícero Duarte / Cinthia Galvão

2. Cícero Duarte
linkedin.com/in/ciceroduarte
github.com/ciceroduarte
Desenvolvedor iOS
Cinthia Galvão
linkedin.com/in/cinthiagalvao
github.com/cpgalvao
Desenvolvedora Android

4. Agenda
-Flutter
- Visão geral
- Demo
- Integração com código nativo
- Geração de versão
-Case UOL VivaBem
-Prós / Contras

5. Motivação
-Oportunidade
- Flutter
-Possível case Google/IO
- App publicado até final de abril

6. O que é Flutter?
- SDK de desenvolvimento multiplataforma
- Criado pelo Google
- Desempenho
- UI rica e nativa
- Desenvolvimento rápido
- 11/05/2017: Primeira release 0.0.6
- 20/06/2018: Release Preview 1
- 04/12/2018: Flutter 1.0

7. Instalação
- Entrar em: https://flutter.io/get-started/install/
- Extrair em um diretório e adicionar ao $PATH
$ export PATH=`pwd`/flutter/bin:$PATH
$ flutter doctor

8. Atualização
$ flutter upgrade

9. Arquitetura em camadas
Engine (C++) Skia Dart Runtime
Framework (Dart)
Animation Painting Gestures
Foundation
Rendering
Widgets
Material Cupertino

10. Dart
- Apresentada pelo Google em 2011
- Substituir o Javascript
- VM ou compilada para Javascript
- Utilizada em produtos internos no Google

11. Flutter + Dart
- Orientada a objetos
- Opcionalmente tipada
- Declarativa
- StyleGuide bem definido
- Compila para ARM Code
- Ahead-of-time
- Just-in-time
+ =

12. Ahead-of-time
🤖💻 📦

13. Just-in-time
📱💻 🤖

14. Widgets
Container Column Row Stack Center Padding
Appbar FloatingActionButton TabBar BottomNavigationBar TextField SimpleDialog

15. StatefulWidgetStatelessWidget
Widget
AssetImage Text Scrollable Animatable
Widgets
Stateless - Imutável,
desenhada apenas uma vez
Stateful - Mutável, método
setState redesenha a widget
AboutPage DetailPage

16. Construindo um layout

17. Demo
% 💻📲 '

18. Internacionalização
dependencies:
flutter_localizations:
sdk: flutter
intl:
intl_translation:
localizationsDelegates: [
// ... app-specific localization delegate[s] here
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('en', 'US'),
const Locale('pt', 'BR'),
// ... other locales the app supports
],
Importar dependências no pubspec.yaml
Implementar delegates e locales

19. class DemoLocalizations {
static Future<DemoLocalizations> load(Locale locale) {
final String name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
final String localeName = Intl.canonicalizedLocale(name);
return initializeMessages(localeName).then((Null _) {
Intl.defaultLocale = localeName;
return DemoLocalizations();
});
}
static DemoLocalizations of(BuildContext context) {
return Localizations.of<DemoLocalizations>(context, DemoLocalizations);
}
String get title {
return Intl.message(
'Hello World',
name: 'title',
desc: 'Title for the Demo application',
);
}
}
Implementar classe para Localization e Strings internacionalizadas

20. Executar comandos
$ flutter pub pub run
intl_translation:extract_to_arb
—output-dir=lib/i18n lib/main.dart
$ flutter pub pub run
intl_translation:generate_from_arb
--output-dir=lib/i18n
--no-use-deferred-loading
lib/main.dart lib/i18n/intl_messages.arb

21. appBar: AppBar(
title: Text("Comprar"),
)
Internacionalização 🚀
dependencies:
flutter_localizations:
sdk: flutter
intl:
intl_translation:
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
S.delegate,
],
supportedLocales: S.delegate.supportedLocales,
Utilizar o plugin para extrair strings

22. Demo
% 💻📲 '

23. MethodChannel
FlutterMethodChannel
MethodChannel
Integração com código nativo
Flutter
State
iOS
AppDelegate
iOS platform
APIs
3rd-Party
APIs for iOS
FlutterViewController
Android
Activity
Android
platform
APIs
3rd-Party
APIs for
Android
FlutterView

24. Integração com código nativo
static const platform = const MethodChannel(‘tdc_demo_channel');
final String result = await platform.invokeMethod('getNativeText', param);
nativeText = 'Texto final recebido do Nativo: $result';
val channel = MethodChannel(flutterView, "tdc_demo_channel")
channel.setMethodCallHandler { call, result ->
if (call.method == "getNativeText") {
var resultString = getString(R.string.platform_string)
result.success("$resultString ${call.arguments}")
} else {
result.notImplemented()
}
}
let channel = FlutterMethodChannel(name: “tdc_demo_channel”, binaryMessenger: controller)
channel.setMethodCallHandler { (call, result) in
if call.method == "getNativeText" {
let resultString = "Método iOS, parâmetro: (call.arguments ?? "")"
result(resultString + "($0 ?? "")")
} else {
result(FlutterMethodNotImplemented)
}
}

25. Integração com código nativo
static const platform = const MethodChannel(‘tdc_demo_channel');
final String result = await platform.invokeMethod('getNativeText', param);
nativeText = 'Texto final recebido do Nativo: $result';
val channel = MethodChannel(flutterView, "tdc_demo_channel")
channel.setMethodCallHandler { call, result ->
if (call.method == "getNativeText") {
var resultString = getString(R.string.platform_string)
result.success("$resultString ${call.arguments}")
} else {
result.notImplemented()
}
}
let channel = FlutterMethodChannel(name: “tdc_demo_channel”, binaryMessenger: controller)
channel.setMethodCallHandler { (call, result) in
if call.method == "getNativeText" {
let resultString = "Método iOS, parâmetro: (call.arguments ?? "")"
result(resultString + "($0 ?? "")")
} else {
result(FlutterMethodNotImplemented)
}
}

26. Integração com código nativo
static const platform = const MethodChannel(‘tdc_demo_channel');
final String result = await platform.invokeMethod('getNativeText', param);
nativeText = 'Texto final recebido do Nativo: $result';
val channel = MethodChannel(flutterView, "tdc_demo_channel")
channel.setMethodCallHandler { call, result ->
if (call.method == "getNativeText") {
var resultString = getString(R.string.platform_string)
result.success("$resultString ${call.arguments}")
} else {
result.notImplemented()
}
}
let channel = FlutterMethodChannel(name: “tdc_demo_channel”, binaryMessenger: controller)
channel.setMethodCallHandler { (call, result) in
if call.method == "getNativeText" {
let resultString = "Método iOS, parâmetro: (call.arguments ?? "")"
result(resultString + "($0 ?? "")")
} else {
result(FlutterMethodNotImplemented)
}
}

27. NativePageState() {
platform.setMethodCallHandler(_handlerNativeCall);
}
Future<dynamic> _handlerNativeCall(MethodCall call) async {
switch (call.method) {
case "getFlutterText":
return Future.value("Método Flutter, parâmetro: ${call.arguments}");
}
}
channel.invokeMethod("getFlutterText", arguments: "iOSParam", result: {
print(resultString + "($0 ?? "")")
})
channel.invokeMethod(“getFlutterText", “AndroidParam”, object : MethodChannel.Result {
override fun success(p0: Any?) {
resultString = "$resultString $p0"
print(resultString)
}
override fun error(p0: String?, p1: String?, p2: Any?) { }
override fun notImplemented() { }
})
Integração com código nativo

28. NativePageState() {
platform.setMethodCallHandler(_handlerNativeCall);
}
Future<dynamic> _handlerNativeCall(MethodCall call) async {
switch (call.method) {
case "getFlutterText":
return Future.value("Método Flutter, parâmetro: ${call.arguments}");
}
}
channel.invokeMethod("getFlutterText", arguments: "iOSParam", result: {
print(resultString + "($0 ?? "")")
})
channel.invokeMethod(“getFlutterText", “AndroidParam”, object : MethodChannel.Result {
override fun success(p0: Any?) {
resultString = "$resultString $p0"
print(resultString)
}
override fun error(p0: String?, p1: String?, p2: Any?) { }
override fun notImplemented() { }
})
Integração com código nativo

29. NativePageState() {
platform.setMethodCallHandler(_handlerNativeCall);
}
Future<dynamic> _handlerNativeCall(MethodCall call) async {
switch (call.method) {
case "getFlutterText":
return Future.value("Método Flutter, parâmetro: ${call.arguments}");
}
}
channel.invokeMethod("getFlutterText", arguments: "iOSParam", result: {
print(resultString + "($0 ?? "")")
})
channel.invokeMethod(“getFlutterText", “AndroidParam”, object : MethodChannel.Result {
override fun success(p0: Any?) {
resultString = "$resultString $p0"
print(resultString)
}
override fun error(p0: String?, p1: String?, p2: Any?) { }
override fun notImplemented() { }
})
Integração com código nativo

30. Gerando versão Android
$ flutter clean
$ flutter build apk --release
$ zipalign -v -p 4
app-release.apk app-release-final.apk
$ apksigner sign --ks <my-release-key.jks>
--out app-release-final-assinada.apk
app-release-final.apk
$ apksigner verify --print-certs
app-release-final-assinada.apk

31. Gerando versão iOS
$ flutter clean
$ flutter build ios --release
$ open ios/Runner.xcworkspace

32. Case
-UOL
- Desenvolvimento nativo de apps
-VivaBem
- Canal de saúde e bem-estar do UOL
-Aplicativo
- Meditação e mindfulness
- Notícias e blogs
- Lembretes

33. -Aplicativo atraente
- Componentes de UI
- Animações
-Funcionalidades do app
- Reprodução de áudio
- Google Analytics
- Notificações
Case

34. 16/02
20/02
28/02
26/03
23/04
03/05
Proposta do case
Início de POCs
POCs -> início
do projeto
Publicação nas lojas
Android e iOS.
Reunião com cliente
sobre app
Versão release
candidate
Confirmação
SandBox area
no Google I/O
Case

35. Case

36. Case

37. Case
http://l.ead.me/bb1V6s

38. Prós Contras
-Desempenho
-Hot reload
-Integração com código nativo
-Integridade dos layouts
-Webview/Maps
-Integração com views nativas
-Falta de componentes nativos
-Suporte para devices 32bits
-Suporte para Android SDK16+

39. Links
- Flutter
- https://flutter.io/
- Instalação/Update do ambiente
- https://flutter.io/get-started/install/
- https://flutter.io/upgrading/
- Widgets
- https://flutter.io/tutorials/layout/
- https://flutter.io/widgets/
- Internacionalização
- https://flutter.io/tutorials/internationalization/
- Integração com código nativo
- https://flutter.io/platform-channels/
- Showcase
- https://flutter.io/showcase/
- https://itsallwidgets.com/flutter-app/vivabem-uol

40. Cícero Duarte
linkedin.com/in/ciceroduarte
Cinthia Galvão
linkedin.com/in/cinthiagalvao
https://github.com/cpgalvao/tdc_demo