frameword flutter

1. Introdução ao Flutter
Rodrigo Rocha <rodrigorgs@ufba.br>

2. Visão geral

3. O que é o Flutter?
Kit de desenvolvimento de software (SDK) para criar aplicativos
mobile* usando a linguagem de programação Dart
Desenvolvido pela Google, com licença open source
* Atualmente, não apenas mobile

4. Principais características (para mobile)
Gera código
binário
Renderiza os
próprios
widgets
É
multiplataforma

5. História
Linha do tempo:
● Revelado para o público em 2015
● Primeira versão pública em 2017
● Versão 1.0 em 2018
● Atualmente na versão 3.x
Influenciado pelo ReactJS (framework para web)

6. Popularidade

7. Plataformas
Aplicativos desenvolvidos em Flutter podem ser executados em
● Android
● iOS
● Windows
● Linux (Debian, Ubuntu)
● macOS
● Web (Chrome, Firefox, Safari, Edge)
https://docs.flutter.dev/reference/supported-platforms

8. Cases

9. Nubank
Adotou Flutter como
principal tecnologia
mobile em 2019, após
uma comparação
sistemática entre Flutter,
React Native e Kotlin
Native (veja o relatório)

10. Dicionário Portátil
Versão original escrita em
2010 usando iOS SDK
(Objective-C, UIKit)
Testes com Ionic mostraram
desempenho ruim (demora e
flicker ao tocar em uma
palavra para ver definição)
Reescrito em 2023 com Flutter,
usando Riverpod para
gerenciamento de estado

11. Outros
● Alibaba
● Google Pay
● eBay
● QuintoAndar
● BMW, Toyota

12. Características

13. A interface gráfica é descrita de forma declarativa (em contraste com
imperativa), e reage a mudanças no estado da aplicação.
Contraste: programação imperativa
● Ao clicar no botão, troque a mensagem para "ERRO" e mude para a cor
vermelha
Programação declarativa
● Definições
○ A variável erro (TRUE/FALSE) indica se houve erro
○ A cor da mensagem é verde (erro = FALSE) ou vermelha (erro = TRUE)
○ O texto da mensagem é "OK" (erro = FALSE) ou "ERRO" (erro = TRUE)
● Ao clicar no botão, altere a variável erro para TRUE
Programação reativa

14. Linguagem de programação Dart
● Desenvolvida pela Google, lançada em 2011
● Originalmente projetada para substituir JavaScript na web
● Orientada a objetos e funcional
● Incorpora recursos de linguagens modernas
Ah não, mais uma linguagem de programação? Ter controle sobre a linguagem
de programação permite ao Google implementar mais facilmente recursos
como hot reload e debuggers, além de diversas otimizações
Linguagem Dart

15. Compilação ahead-of-time (AOT) e just-in-time (JIT)
● No ambiente de desenvolvimento, usa compilação JIT
○ permite compilação incremental, permitindo ciclos curtos de
modificar código > executar app
○ permite debugging e coleta de métricas
○ app é menos otimizado
● Na hora de gerar o app nativo, o código Dart é compilado para código
nativo
○ a compilação é toda feita no ambiente de desenvolvimento, e não no
dispositivo mobile
○ app mais otimizado
Compilação AOT e JIT

16. ● Durante o desenvolvimento, ao alterar o código do app, apenas a parte
alterada é recompilada
● Isso possibilita ver o resultado das modificações de forma quase
instantânea
Hot reload

17. Possui ferramentas robustas para depuração (debugging)
● Inspetor de UI
● Análise de desempenho
● Análise de rede
● Depuração de memória
● Depuração de código
Ferramentas de debugging
https://docs.flutter.dev/tools/devtools/overview

18. ● Dart possui um gerenciador de pacotes, o pub
● O site pub.dev é o repositório oficial de pacotes para Dart e Flutter, com
mais de 40 mil pacotes
Pacotes

19. ● Um app Flutter NÃO usa widgets (componentes de interface gráfica)
nativos do Android ou do iOS
● O Flutter possui seus próprios widgets customizáveis
● A princípio, um app em Flutter terá a mesma aparência no Android ou no
iOS
● Flutter possui um motor gráfico para desenhar na tela a 60 FPS (quadros
por segundo)
○ Isso permite programar widgets com animações fluidas
○ O motor gráfico original, Skia, está sendo substituído pelo Impeller
Widgets nativos?

20. Widgets em todo lugar
● A interface gráfica é construída
em código Dart, como uma
hierarquia de widgets
● Ex.: um botão é um widget que
contém um outro widget, texto
● Há widgets para gerenciar o
layout

21. Testes rápidos
● O Flutter possui bons frameworks para teste automatizado
● Até mesmo testes que envolvem interface gráfica executam
rapidamente, pois Flutter não precisa renderizar o app durante o teste

22. Boa documentação
● Documentação de referência
● Vídeos oficiais
● Cookbooks (receitas)
● Tutoriais interativos

23. ● Não é trivial de se aprender
● Código pode ficar difícil de ler,
com muitos níveis de
indentação
● Dependência de pacotes
contribuídos pela comunidade
para muitas coisas, ainda há
lacunas
● Pacote do app relativamente
grande
● Suporte a Android melhor do
que a iOS
Pontos a considerar import 'package:flutter/material.dart';
void main() {
runApp(
Container(
child: const Center(
child: Text(
'Alô, mundo!',
textDirection: TextDirection.ltr,
),
),
)
);
}