Apresentação realisada no Google I/O Extended Cuiabá, em 26/05/2018

1. Wiliam Luiz Buzatto
wiliambuzatto@gmail.com
medium.com/@wiliambuzatto
github.com/wiliambuzatto

3. Aplicativos rápidos, modernos e bonitos
para Android e iOS

4. Ah, Sério??

5. Aplicativos rápidos, modernos e bonitos
para Android e iOS

6. Por que o Flutter é diferente?
O que há de incrível sobre o Flutter?

7. Mobile é difícil
• Lento (e caro)
• Design encantador é difícil
• Diversidade entre plataformas pode complicar
• Dois (ou mais) times

8. Familiar?

9. Deve haver um forma melhor!
• Desenvolvimento deveria ser rápido
• Customizar deveria ser fácil
• Confiar no que os usuário veem, é o que você vê.
• Criar uma vez, elegante.

10. Desenvolvimento fluído
• Rápido e fácil, bom ferramental
Flexível
• Nunca diga não ao seu designer
UI Fiel
• Parecer incrível na mão do usuário (look & feel)

11. Breve história
sobre
desenvolvimento
mobile

12. OEM SDKs
(Fabricante original do kit desenvolvimento)

13. WebViews

14. Reactive Views

15. A ponte
Seu App
Reino
Javascript
Serviços,
eventos,
Widgets
Reino
Nativo
Troca de contexto

16. E o Flutter?

17. Widgets!

18. O que é um Widget?

19. Widgets
• Aparência é primordial (look and feel)
• Devem ser rápidos
• Extensível e customizável

20. Flutter

21. WIDGETS

22. Tudo é um
Widget • Scrolling
• Themes
• Navigation
• Applications
• Crie novos tipos de widgets

23. Flutter possui seus próprios
Widgets!
• Crie o layout na sua cabeça
• Widgets são simples e rápidos
• Tudo é um Widget
• Customização e extensibilidade total

24. Layout widgets (para elementos únicos)
Padding Center Align
https://flutter.io/widgets/layout/

25. Layout widgets (múltiplos elementos)
Row Column Stack
https://flutter.io/widgets/layout/
ListView
Grid, flow, table ...

26. Layout na sua cabeça

27. Exemplos

28. Reactive Views
• Reactive web Views, introduziram o
Virtual DOM
• Virtual DOM é imutável
• Reconstruído para cada quadro
(frame)

29. Virtual DOM (web) Plataforma

30. Virtual Widget (mobile) Plataforma

31. Widgets
•Stateless
•Statefull

33. Como o
Flutter Faz
tudo isso?

35. Dart
• Rápido para desenvolvimento (JIT) e para
produção (AOT)
• Tree shaking compiler (remoção de código
morto)
• Generation garbage collection
• Sintaxe Familiar, fácil de utilizar e aprender

36. Compatibilidade(?)
• Não precisa de bibliotecas de compatibilidade!
• Android Jelly Bean+, iOS 8+
• Novos Widgets?
• Widgets Atualizados?

37. Ferramental

38. Hot Reload!

40. Demo!

41. Showcase

45. O que há de incrível sobre o Flutter?

46.  Reactive Views, sem ponte javascript
 Rápido e suave, compila AOT para código nativo.
 Controle dos Widgets e Layout pelo desenvolvedor.
 Widgets bonitos e customizáveis.
 Ferramental fantástico, stateful hot reload.
 Mais performático, mais compatível.
 Customização, possibilita múltiplas plataformas.

47. Desafio!

48.  Reactive Views, sem ponte javascript
 Rápido e suave, compila AOT para código nativo.
 Controle dos Widgets e Layout pelo desenvolvedor.
 Widgets bonitos e customizáveis.
 Ferramental fantástico, stateful hot reload.
 Mais performático, mais compatível.
 Customização, possibilita múltiplas plataformas.
O que de incrível sobre o
Flutter?
@wiliambuzatto
wiliambuzatto@gmail.com
medium.com/@wiliambuzatto

49. Referências
• https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
• https://www.youtube.com/watch?v=n3FLHWF7UgM
• https://www.youtube.com/watch?v=VUiVkDpikDI&t=304s
• https://proandroiddev.com/flutter-from-zero-to-comfortable-6b1d6b2d20e
• https://github.com/flutter/flutter
• https://flutter.io/
• https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
• https://www.youtube.com/watch?v=RS36gBEp8OI
• https://www.youtube.com/watch?v=rXiWXWV1Ht4
• https://br.udacity.com/course/build-native-mobile-apps-with-flutter--ud905
• https://medium.com/flutter-io/announcing-flutter-beta-1-build-beautiful-native-apps-dc142aea74c0
• https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf
• https://hackernoon.com/flutter-5-reasons-why-you-may-love-it-55021fdbf1aa