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) ); }
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