Introdução ao Flutter

Transcript

1. Introdução ao Flutter
2. Jean Pimentel Product Engineer @ CI&T Desenvolvedor mobile (Android & iOS) Leitor de ficção científica Organizador do Android BH
3. O que é Flutter? Um SDK para desenvolver apps multiplataforma (Android e iOS) Foco em apps performáticos, modernos e bonitos Desenvolvido pelo Google, é gratuito e open-source Mais de 100 contribuições da comunidade open source * Atualmente em Beta 3 (Ready for Production)
4. Flutter Prototipação: velocidade na construção de protótipos funcionais e de alta fidelidade. Design: experiência única e customizada em ambas plataformas. Desenvolvimento: linguagem fácil de usar, um amplo conjunto de widgets e excelente suporte a IDEs. Libera um tempo valioso para se focar em funcionalidades e experiências agradáveis.
5. Híbridos - 1ª Geração Webview JS Bridge Webviews e JS diferentes entre os dispositivos Perfomance ruim Ionic, Phonegap, Cordova
6. Híbridos - 2ª Geração Transpiling (n to nativo) JS Bridge Text -> UITextView (iOS) e TextView (Android) Alguns elementos são díficeis de abstrair, diminuindo o reuso Xamarin, ReactNative
7. Híbridos - 3ª Geração Nativo Não depende da OEM Acesso direto, baixo nível Performance Flutter
8. Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino
9. Dart Linguagem de programação multiparadigma também criada pelo Google em 2011 O objetivo era melhorar o desenvolvimento web limitado pelo JS, colocando a Dart VM nos browsers Além do Flutter, um de seus usos é no Angular
10. Dart É possível rodar o Dart de 3 formas: - Compilado pra JavaScript - Utilizando a Dart VM (JIT) - Compilando para código nativo (AOT)
11. Skia Engine gráfica multiplataforma Adquirida pelo Google em 2015, que tornou-a open-source Android, iOS, Linux, macOS, Windows, Fuchsia Atualmente utilizado no Google Chrome, Chrome OS, Mozilla Firefox, Android, Sublime Text 3… Foco em performance
12. Flutter Widget Tree R e n d e r Canvas Events Application Platform
13. Exemplos
14. Exemplos
15. Widgets: Analogias em Flutter var container = new Container( child: new Text( "Lorem ipsum", style: new TextStyle( fontSize: 24.0 fontWeight: FontWeight.w900, fontFamily: "Georgia", ), ), width: 320.0, height: 240.0, color: Colors.grey[300], ); <div class="greybox"> Lorem ipsum </div> .greybox { background-color: #e0e0e0; width: 320px; height: 240px; font: 900 24px Georgia; }
16. Widgets Liberdade pra desenhar do seu jeito! Já vem com widgets: - Material Design - Cupertino (iOS)
17. Widgets
18. class HelloWorld extends StatelessWidget { @override Widget build(BuildContext context) { return const Center( child: const Text('Hello, world!', textDirection: TextDirection.ltr) ); } }
19. class HelloWorld extends StatefulWidget { @override _HelloWorldState createState() => new _HelloWorldState(); } class _HelloWorldState extends State<HelloWorld> { String name; Future<void> _getName() async { // name = someMethod() setState(() { this.name = name; }); } @override Widget build(BuildContext context) { return new Center( child: new Text('Hello, $name!', textDirection: TextDirection.ltr) ); }
24. Sem layouts globais new Center( child: new Text('Texto Centralizado', style: textStyle), ) Todo widget define seu próprio layout.
25. Tools
26. Tools flutter doctor flutter upgrade flutter create flutter packages get flutter packages upgrade flutter format flutter analyze
27. flutter create -i swift -a kotlin projectname android ios lib test pubspec.yaml
28. name: flutter_project description: My amazing project dependencies: flutter: sdk: flutter firebase_auth: "^0.2.5" pubspec.yaml
29. void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return const Center( child: const Text('Hello, world!', textDirection: TextDirection.ltr) ); } } main.dart
30. void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return const Center( child: const Text('Hello, world!', textDirection: TextDirection.ltr) ); } } main.dart
31. Hot Reload Atualiza imediatamente o código fonte rodando na Dart VM Stateful: O estado do app é mantido Evita ter que navegar no app até a tela desejada
33. Erros em runtime Stacktrace por widget Não impacta o app inteiro Facilita o debug
34. Interoperabilidade Platform channels Troca de mensagens entre o app e a plataforma Assíncrono A serialização/desserialização é feita automaticamente
35. static const platform = const MethodChannel('samples.flutter.io/battery'); 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}'."; } }
36. class MainActivity() : FlutterActivity() { private val CHANNEL = "samples.flutter.io/battery" override fun onCreate(savedInstanceState: Bundle?) { // ... 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) } } // ... } } } private fun getBatteryLevel(): Int { /***/ }
37. let controller: FlutterViewController = window?.rootViewController as! FlutterViewController; let batteryChannel = FlutterMethodChannel.init(name: "samples.flutter.io/battery", binaryMessenger: controller); batteryChannel.setMethodCallHandler({ (call: FlutterMethodCall, result: FlutterResult) -> Void in if ("getBatteryLevel" == call.method) { result(Int(UIDevice.current.batteryLevel * 100)); } else { result(FlutterMethodNotImplemented); } });
38. Materiais flutter.io github.com/flutter reddit.com/r/flutterdev
39. Contato contato@jeanpimentel.com.br speakerdeck.com/jeanpimentel