Introdução ao Flutter

Introdução ao Flutter

Dd958da4c68b7d3227b3f1cd92a429a6?s=128

Jean Pimentel

May 23, 2018
Tweet

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) ); }
  20. None
  21. None
  22. None
  23. None
  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
  32. None
  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