Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introdução ao Flutter

Introdução ao Flutter

Jean Pimentel

May 23, 2018
Tweet

More Decks by Jean Pimentel

Other Decks in Technology

Transcript

  1. Introdução ao
    Flutter

    View full-size slide

  2. Jean Pimentel
    Product Engineer @ CI&T
    Desenvolvedor mobile (Android & iOS)
    Leitor de ficção científica
    Organizador do Android BH

    View full-size slide

  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)

    View full-size slide

  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.

    View full-size slide

  5. Híbridos - 1ª Geração
    Webview
    JS Bridge
    Webviews e JS diferentes entre os dispositivos
    Perfomance ruim
    Ionic, Phonegap, Cordova

    View full-size slide

  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

    View full-size slide

  7. Híbridos - 3ª Geração
    Nativo
    Não depende da OEM
    Acesso direto, baixo nível
    Performance
    Flutter

    View full-size slide

  8. Skia Dart Text
    Foundation
    Animation Painting
    Rendering
    Widgets
    Material
    Gestures
    Engine
    (C++)
    Framework
    (Dart)
    Cupertino

    View full-size slide

  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

    View full-size slide

  10. Dart
    É possível rodar o Dart de 3 formas:
    - Compilado pra JavaScript
    - Utilizando a Dart VM (JIT)
    - Compilando para código nativo (AOT)

    View full-size slide

  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

    View full-size slide

  12. Flutter
    Widget
    Tree
    R
    e
    n
    d
    e
    r
    Canvas
    Events
    Application Platform

    View full-size slide

  13. 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],
    );

    Lorem ipsum

    .greybox {
    background-color: #e0e0e0;
    width: 320px;
    height: 240px;
    font: 900 24px Georgia;
    }

    View full-size slide

  14. Widgets
    Liberdade pra desenhar do seu jeito!
    Já vem com widgets:
    - Material Design
    - Cupertino (iOS)

    View full-size slide

  15. class HelloWorld extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return const Center(
    child: const Text('Hello, world!', textDirection: TextDirection.ltr)
    );
    }
    }

    View full-size slide

  16. class HelloWorld extends StatefulWidget {
    @override
    _HelloWorldState createState() => new _HelloWorldState();
    }
    class _HelloWorldState extends State {
    String name;
    Future _getName() async {
    // name = someMethod()
    setState(() {
    this.name = name;
    });
    }
    @override
    Widget build(BuildContext context) {
    return new Center(
    child: new Text('Hello, $name!', textDirection: TextDirection.ltr)
    );
    }

    View full-size slide

  17. Sem layouts globais
    new Center(
    child: new Text('Texto Centralizado', style: textStyle),
    )
    Todo widget define seu próprio layout.

    View full-size slide

  18. Tools
    flutter doctor
    flutter upgrade
    flutter create
    flutter packages get
    flutter packages upgrade
    flutter format
    flutter analyze

    View full-size slide

  19. flutter create -i swift -a kotlin projectname
    android
    ios
    lib
    test
    pubspec.yaml

    View full-size slide

  20. name: flutter_project
    description: My amazing project
    dependencies:
    flutter:
    sdk: flutter
    firebase_auth: "^0.2.5"
    pubspec.yaml

    View full-size slide

  21. 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

    View full-size slide

  22. 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

    View full-size slide

  23. 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

    View full-size slide

  24. Erros em runtime
    Stacktrace por widget
    Não impacta o app inteiro
    Facilita o debug

    View full-size slide

  25. Interoperabilidade
    Platform channels
    Troca de mensagens entre o app
    e a plataforma
    Assíncrono
    A serialização/desserialização é
    feita automaticamente

    View full-size slide

  26. static const platform = const MethodChannel('samples.flutter.io/battery');
    Future _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}'.";
    }
    }

    View full-size slide

  27. 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 { /***/ }

    View full-size slide

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

    View full-size slide

  29. Materiais
    flutter.io
    github.com/flutter
    reddit.com/r/flutterdev

    View full-size slide

  30. Contato
    [email protected]
    speakerdeck.com/jeanpimentel

    View full-size slide