Tipos de Aplicativos
Vantagens dos Apps nativos
● Qualidade
● Proporção
● Velocidade
● IDE fácil
● Competitividade
● Interações avançadas UI
● Native Look and Feel
● Usabilidade
● Novas Features
São eles: Android (Java), iOS (Swift), Windows mobile (.net)
Vantagens dos Web Apps
● Custo de desenvolvimento reduzido
● Fácil de integrar
● Manutenção simples
● Fácil instalação
● Acessível de qualquer lugar
● Fácil customização
● Acessível por muitos devices
● Fácil de desenvolver
Use tecnologias Web para desenvolver um App
Vantagens dos Apps Híbridos
● Custo reduzido de desenvolvimento
● UI/UX Avançadas
● Fácil de integrar
● Suporte Offline
● Manutenção simplificada
Um único código que compila nativamente
Clientes, usuários, dev, designers querem?
● Custo reduzido de desenvolvimento
● UI/UX Avançadas
● Fácil de integrar
● Suporte Offline
? ● Manutenção simplificada
● Qualidade
● Velocidade
● Competitividade
● Interações avançadas de UI
Um código único que compile nativamente
E se eu te dissesse que Flutter tem!
● Custo reduzido de desenvolvimento
● UI/UX Avançadas
● Fácil de integrar
● Suporte Offline
● Manutenção simplificada
● Qualidade
● Velocidade
● Competitividade
● Interações avançadas de UI
Um código único que compile nativamente
O que é Flutter?
Um SDK que facilita a criação de aplicativos modernos,
bonitos e de alto desempenho
Funciona para Android e iOS
Um open-source toolkit, desenvolvido by Google*
100+ contribuições da comunidade open source
Para quem é o Flutter?
Designers - convergindo para uma experiência de marca
no Android e iOS
Prototipadores - desfrute de uma maneira rápida e de alta
fidelidade para criar protótipos funcionais
Desenvolvedores - se beneficie de fantásticas ferramentas de
desenvolvedor, uma linguagem fácil de usar,
Developer Experience
Performance
Design-oriented
Development Flow
O que vemos aqui?
Diagrama do layout
- Procure por linhas e colunas
- Existe um grid?
- Algum elemento sobreposto?
- Precisamos de tabs?
- Padding, alinhamento ou bordas?
Projetando de cima a baixo
Analogia HTML/CSS no Flutter
var container = new Container( // grey box
child: new Text(
<div class="greybox">
"Lorem ipsum",
Lorem ipsum
style: new TextStyle(
</div>
fontSize: 24.0
fontWeight: FontWeight.w900,
.greybox {
fontFamily: "Georgia",
background-color: #e0e0e0; /* grey 300 */
),
width: 320px;
),
height: 240px;
width: 320.0,
font: 900 24px Georgia;
height: 240.0,
}
color: [Link][300],
);
Ferramentas eficientes
$ flutter doctor
Verifica seu ambiente e exibe um relatório na janela do terminal
$ flutter upgrade
Atualiza o SDK do Flutter e seus pacotes
$ flutter packages get
Verifica seu ambiente e exibe um relatório no terminal
$ flutter packages upgrade
Recuperará a versão mais alta disponível do pacote
$ flutter format
Formata automaticamente seu código de acordo com o estilo Flutter
$ flutter analyze
Analisa seu código e ajuda a encontrar possíveis erros
Hot Reload
Injetando arquivos de código-fonte atualizados
na Dart VM em execução
Stateful: App o estado é mantido após recarregar
Faça uma iteração rápida em uma tela
profundamente aninhada no seu aplicativo
O poder dos Widgets
Widgets rápidos e de ótima aparência
Tudo é um Widget
Adeus sistema global de layout
new Center(
child: new Text('Centered Text', style: textStyle),
)
Layouts locais: cada widget define seu próprio layout.
Não é necessário dizer aos pais que
cada children devem estar centradas..
StatefulWidget
vs.
StatelessWidget
Customizando e estendendo Widgets
O sistema Widget do Flutter foi projetado para ser
facilmente personalizável
Composição: os widgets são criados a partir de widgets
menores que você pode reutilizar e
combine de maneiras inovadoras para criar widgets
personalizados
class RaisedButton extends StatelessWidget {
...
}
Material Cupertino
Widgets
Framework
(Dart) Rendering
Animation Painting Gestures
Foundation
Engine
Skia Dart Text
(C++)
Thanks!
Everton (Tom) Costa
[Link]@[Link]
[Link]
[Link]
