Flutter: o que é isso?

Apresentado na Trilha Mobile do TDC Florianópolis 2018

Transcript

1. Flutter O que é isso?
2. 2 Desenvolvimento multi-plataforma
3. Wrapper WebView • Know-how das tecnologias web • Versões do JavaScript & features da WebView divergentes entre versões (fragmentação) • Limitação no uso de recursos não incluídos no SDK JavaScript • Performance • Lentidão na disponibilização de novas features para as plataformas 3
4. Wrapper WebView 4
5. Transpiler • Código-fonte para Código-fonte • Ganhos em performance • Frequentemente existe a necessidade de lidar diretamente com código nativo • Algumas abstrações não funcionam bem para todas as plataformas - write once, fix everywhere 5
6. Transpiler 6
7. Flutter • Engine (C++) • Não utiliza o toolkit da plataforma - ele tem seu próprio toolkit! • Se conecta às camadas mais baixo nível de cada SO - gráficos, som, etc. • Binários otimizados para cada plataforma 7
8. Flutter 8
9. Dicas de leitura THE DIFFERENT APPROACHES TO CROSS-PLATFORM APPS https://bit.ly/2GZM4Vb WHAT’S REVOLUTIONARY ABOUT FLUTTER https://bit.ly/2gEFW8d 9
10. Flutter: o que é? • Toolkit para a criação extremamente rápida de aplicativos multi-plataforma (iOS e Android)* • Open-Source, atualmente Beta • Foco na criação de interfaces belas e performáticas • Possibilidade de interoperabilidade com código pré-existente 10
11. Flutter: Aplicações 11 DESENVOLVIMENTO Baixa curva de aprendizado, velocidade e um codebase único Mix up your images to match your content. Mix up your images to match your content. PROTOTIPAÇÃO Rápida iteração e customização de componentes DESIGN Unificação da linguagem utilizada - mesmo sem experiência prévia em desenvolvimento
12. Exemplos 12
14. 14 DART???
16. Dart • Familiar a linguagens conhecidas (C-like) • Amplamente utilizada em diversos produtos internamente no Google • Compila ARM e x86, transpila para JavaScript • Vasta Standard Library • Versão 2 lançada recentemente 16
17. TOOLING 17
18. Tooling flutter doctor flutter upgrade flutter init flutter packages get|upgrade flutter format flutter analyze flutter run 18
19. pubspec.yaml name: flutter_project description: A new Flutter project. dependencies: flutter: sdk: flutter flutter: uses-material-design: true 19
20. pubspec.yaml name: flutter_project description: A new Flutter project. dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 flutter: uses-material-design: true 20
21. Tooling 21
22. Hot Reload 22
23. Runtime Errors 23
24. UI TOOLKIT 24
29. Layouts Locais Todo widget define seu próprio layout: não existe um sistema global de layout new Center( child: new Text('Texto centralizado'), ); 29
30. Layouts Locais Todo widget define seu próprio layout: não existe um sistema global de layout Center( child: Text('Texto centralizado'), ); // no Dart 2, 'new' é opcional 30
31. Tudo é um widget 31
32. Tudo é um widget class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { ... } } 32
33. Tudo é um widget class MyWidget extends StatefulWidget { @override State<MyWidget> createState() { ... } } 33
34. Tudo é um widget class MyWidget extends StatefulWidget { @override State<MyWidget> createState() { ... } } 34
35. Tudo é um widget class _MyWidgetState extends State<MyWidget> { var _counter = 0; ... void incrementCounter() { setState(() { _counter++; }); } } 35
36. Tudo é um widget class MyWidget extends StatefulWidget { @override State<MyWidget> createState() { ... } } 36
37. Tudo é um widget class MyWidget extends StatefulWidget { @override _MyWidgetState createState() { ... } } 37
38. Tudo é um widget class MyWidget extends StatefulWidget { @override _MyWidgetState createState() => new _MyWidgetState(); } 38
39. NAVEGAÇÃO 39
40. Navegação class MyApp extends StatelessWidget { var routes = ... @override Widget build(BuildContext context) { return new MaterialApp( title: 'Hello TDC!', ... home: HomeScreen(), routes: routes, ); } } 40
41. Navegação class MyApp extends StatelessWidget { var routes = ... @override Widget build(BuildContext context) { return new MaterialApp( title: 'Hello TDC!', ... home: HomeScreen(), routes: routes, ); } } 41
42. Navegação val routes = <String, WidgetBuilder> { '/home': (BuildContext context) => new HomeScreen(), '/details': (BuildContext context) => new DetailsScreen() }; Navigator.pushNamed(context, '/details'); Navigator.push( context, new MaterialPageRoute(builder: (context) => new DetailScreen()), ); Navigator.pop(context); 42
43. Navegação val routes = <String, WidgetBuilder> { '/home': (BuildContext context) => new HomeScreen(), '/details': (BuildContext context) => new DetailsScreen() }; Navigator.pushNamed(context, '/details'); Navigator.push( context, new MaterialPageRoute(builder: (context) => new DetailScreen()), ); Navigator.pop(context); 43
44. Navegação val routes = <String, WidgetBuilder> { '/home': (BuildContext context) => new HomeScreen(), '/details': (BuildContext context) => new DetailsScreen() }; Navigator.pushNamed(context, '/details'); Navigator.push( context, new MaterialPageRoute(builder: (context) => new DetailScreen()), ); Navigator.pop(context); 44
45. Navegação val routes = <String, WidgetBuilder> { '/home': (BuildContext context) => new HomeScreen(), '/details': (BuildContext context) => new DetailsScreen() }; Navigator.pushNamed(context, '/details'); Navigator.push( context, new MaterialPageRoute(builder: (context) => new DetailScreen()), ); Navigator.pop(context); 45
46. PLATFORM CHANNELS 46
47. Platform Channels Camada de comunicação que permite que o Flutter acesse serviços na plataforma de execução (Android, iOS) 47
48. Platform Channels (ex. Android) 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 } } } 48
49. Platform Channels (Android) MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result -> if (call.method == "getBatteryLevel") { val batteryLevel = getBatteryLevel() if (batteryLevel != -1) { result.success(batteryLevel) } else { result.error("UNAVAILABLE", "Battery level not available.", null) } } else { result.notImplemented() } } 49
50. Platform Channels (Flutter) 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; }); } 50
51. Links FLUTTER https://flutter.io FLUTTER FOR WEB DEVELOPERS https://flutter.io/web-analogs/ FLUTTER FOR ANDROID DEVELOPERS https://flutter.io/flutter-for-android/ FLUTTER FOR REACT NATIVE DEVELOPERS https://flutter.io/flutter-for-react-native/ 51
52. Links - Vídeos WHAT IS FLUTTER? https://www.youtube.com/watch?v=h7HOt3Jb1Ts SINGLE CODEBASE, TWO APPS WITH FLUTTER AND FIREBASE https://www.youtube.com/watch?v=w2TcYP8qiRI IN RECORD TIME: HOW WE QUICKLY BUILT A SERVERLESS APP WITH FIREBASE AND FLUTTER https://www.youtube.com/watch?v=prlK_QL_qOA HOW DART AND FLUTTER WORK TOGETHER? https://www.youtube.com/watch?v=iVYpeEd3Jes 52
53. OBRIGADO Slides disponíveis em: speakerdeck.com/rafaeltoledo 53