![Page 1: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/1.jpg)
![Page 2: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/2.jpg)
Tipos de Aplicativos
![Page 3: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/3.jpg)
●
●●●●●●●
Qualidade● Proporção
VelocidadeIDE fácilCompetitividadeInterações avançadas UINative Look and FeelUsabilidadeNovas Features
São eles: Android (Java), iOS (Swift), Windows mobile (.net)
Vantagens dos Apps nativos
![Page 4: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/4.jpg)
●●●●●●●●
Custo de desenvolvimento reduzidoFácil de integrarManutenção simplesFácil instalaçãoAcessível de qualquer lugarFácil customizaçãoAcessível por muitos devicesFácil de desenvolver
Use tecnologias Web para desenvolver um App
Vantagens dos Web Apps
![Page 5: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/5.jpg)
●●●●●
Custo reduzido de desenvolvimentoUI/UX AvançadasFácil de integrarSuporte OfflineManutenção simplificada
Um único código que compila nativamente
Vantagens dos Apps Híbridos
![Page 6: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/6.jpg)
●●●●●●●●●
?
Custo reduzido de desenvolvimentoUI/UX AvançadasFácil de integrarSuporte OfflineManutenção simplificadaQualidadeVelocidadeCompetitividadeInterações avançadas de UI
Um código único que compile nativamente
Clientes, usuários, dev, designers querem?
![Page 7: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/7.jpg)
●●●●●●●●●
Custo reduzido de desenvolvimentoUI/UX AvançadasFácil de integrarSuporte OfflineManutenção simplificadaQualidadeVelocidadeCompetitividadeInterações avançadas de UI
Um código único que compile nativamente
E se eu te dissesse que Flutter tem!
![Page 8: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/8.jpg)
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
O que é Flutter?
![Page 9: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/9.jpg)
Designers - convergindo para uma experiência de marcano Android e iOS
Prototipadores - desfrute de uma maneira rápida e de altafidelidade para criar protótipos funcionais
Desenvolvedores - se beneficie de fantásticas ferramentas dedesenvolvedor, uma linguagem fácil de usar,
Para quem é o Flutter?
![Page 10: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/10.jpg)
Developer Experience
Performance
![Page 11: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/11.jpg)
Design-oriented
Development Flow
![Page 12: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/12.jpg)
O que vemos aqui?
![Page 13: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/13.jpg)
-----
Procure por linhas e colunasExiste um grid?Algum elemento sobreposto?Precisamos de tabs?Padding, alinhamento ou bordas?
Diagrama do layout
![Page 14: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/14.jpg)
Projetando de cima a baixo
![Page 15: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/15.jpg)
var container = new Container( // grey box
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; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Georgia;
}
Analogia HTML/CSS no Flutter
![Page 16: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/16.jpg)
Ferramentas eficientes
![Page 17: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/17.jpg)
$ flutter doctor
$ flutter upgrade
Verifica seu ambiente e exibe um relatório na janela do terminal
Atualiza o SDK do Flutter e seus pacotes
![Page 18: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/18.jpg)
$ flutter packages get
$ flutter packages upgrade
Verifica seu ambiente e exibe um relatório no terminal
Recuperará a versão mais alta disponível do pacote
![Page 19: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/19.jpg)
$ flutter format
$ flutter analyze
Formata automaticamente seu código de acordo com o estilo Flutter
Analisa seu código e ajuda a encontrar possíveis erros
![Page 20: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/20.jpg)
Injetando arquivos de código-fonte atualizadosna Dart VM em execução
Stateful: App o estado é mantido após recarregar
Faça uma iteração rápida em uma telaprofundamente aninhada no seu aplicativo
Hot Reload
![Page 21: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/21.jpg)
![Page 22: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/22.jpg)
O poder dos Widgets
![Page 23: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/23.jpg)
Widgets rápidos e de ótima aparência
![Page 24: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/24.jpg)
Tudo é um Widget
![Page 25: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/25.jpg)
Layouts locais: cada widget define seu próprio layout.Não é necessário dizer aos pais quecada children devem estar centradas..
new Center(child: new Text('Centered Text', style: textStyle),
)
Adeus sistema global de layout
![Page 26: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/26.jpg)
StatefulWidgetvs.
StatelessWidget
![Page 27: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/27.jpg)
O sistema Widget do Flutter foi projetado para serfacilmente personalizávelComposição: os widgets são criados a partir de widgetsmenores que você pode reutilizar ecombine de maneiras inovadoras para criar widgetspersonalizados
class RaisedButton extends StatelessWidget {...}
Customizando e estendendo Widgets
![Page 28: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/28.jpg)
Skia Dart Text
Foundation
Animation Painting
Rendering
Widgets
Material
Gestures
Engine(C++)
Framework(Dart)
Cupertino
![Page 29: Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),](https://reader036.vdocuments.com.br/reader036/viewer/2022081613/5fb8483a9089d9062b39560a/html5/thumbnails/29.jpg)
Thanks! Everton (Tom) Costa
[email protected]://github.com/TomCostahttps://www.linkedin.com/in/costaeverton