Elementos

 Básicos  de  Programacão  

Flu6er  e  Dart  
 
 
Prof. Markus Endler
 
Felipe Carvalho e Fernando Benedito

http://www.inf.puc-rio.br/~endler/courses/Flutter

LA  C  
 

Laboratory for Advanced Collaboration

 Algumas  considerações  sobre  Dart  e  Sintaxe  
§  Dart  é  uma  linguagem  1pada,  o  que  ajuda  na  detecção  de  erros  ao  digitar  
o  código.    
§  Mas  para  isso  é  necessário  declarar  explicitamente  os  1pos  que  se  deseja  
(Widget,  no  exemplo  abaixo)  
§  O  que  é  boa  pra1ca.  Pois  a  IDE  fornece  opções  de  metosos  quando  Dart  
conhece  oos  typos.    

Sempre que uma parte estiver sublinhada

com vermelho, os tipos não são
compatíveis.

2
 Algumas  considerações  sobre  Dart  e  Sintaxe  
§  Quando  existe  apenas  uma  instrução  no  corpo,  pode-­‐se  remover  as  
chaves  {  e  }  e  usar  apenas:  
Void main() => runApp(myApp());
§  Usar  Annota1ons  @  no  código  facilita  o  entendimento  do  código  e  a  
manutenção.  

@override avisa que estamos

sobreescrevendo o método
build de *Widget

3
 Método  build  retorna  MaterialApp()
Metodo  build(context)  em  uma  classe    do  1po  widget  
§  Será  chamada  por  FluXer  para  renderizar  o  widget  na  UI  
§  Context é  um  argumento  de  build() que  contém  meta-­‐informacão  
fornecida  pelo  FluXer  sobre  a  aplicação  móvel  do  widget,  sua  posição  na  
UI,  etc.  
§  Todo  build precisa  fazer  return:  Um  widget  sempre  precisa  retornar  
um  outro  widget,  até  que  se  chegue  um  widget  básico  do  FluXer  que  
possa  ser  desenhado.  
§  Retornando  um  MaterialApp:  esse  widget  permite  escolher/determinar  
o  theme,  tem  a  capacidade  de  navegar  entre  páginas,  etc.  ele  será  o  root  
widget  do  seu  app.  
§  return MaterialApp()não  é  a  classe,  mas  o  método  construtor  da  
classe  homônima.  
 
 

4
 Adicionando  o  Scaffold,  Card  e  Column  
§  Widget  Scaffold  é  usado  para  criar  uma  página,  e  é  1picamente  
fornecido  como  parâmetro  home  do  MaterialApp
§  Scaffold,  consiste  de  um  appBar  e  um  body,  onde  o  body  é  um  
container  widget  
§  Mas  body  pode  também  conter  um  Card  widget  (também  fornecido  no  
Material  Design  
§  Card  widget  precisa  ter  um  child,  que  essencialmente  é  o  seu  
conteúdo  
§  Pode  ser  um  Column(children: <widget> []),  que  permite  
apresentar  elementos  da  UI  empilhados  em  uma  coluna.  

5
 Adicionando  Elementos  ao  Column  
Nesse  exemplo,  iremos  colocar  como  elementos  do  
vetor  parâmetro  <widget>[ ]  do  Column  
§  O  widget  Image (imagem.jpg) na  1a  posição  
(superior  )e  um  widget  Text (string) na  2a  
posição  –  inferior.    Elementos  separados  por  virgula.  
§  A  imagem  (foto)  será  ob1da  de  uma  pasta  assets  (a  
ser  criada  por  voce)  no  projeto.  Arraste  a  sua  imagem  
para  lá.  
§  Chame  método  Image.assets(‘assets/
imagem.jpg’),  com  o  path  da  imagem  a  ser  
exibida.    
§  O  nome  assets  é  uma  convenção  para  elementos  
está1cos  de  seu  app.  

6
 O  que  são  assets  ?  

§  Asset  significa  um  a1vo    

§  Um  asset  é  um  arquivo  que  faz  parte  do  
pacote  do  seu  app  e  é  implantado  com  seu  
aplica1vo.    
§  Tudo  no  asset  permanece  acessível  em  
tempo  de  execução.    
§  Tipos  comuns  de  assets  incluem  dados  
está1cos  (por  exemplo,  arquivos  JSON),  
arquivos  de  configuração,  ícones  e  imagens  
(JPEG,  WebP,  GIF,  animação  de  WebP  /  GIF,  
PNG,  BMP  e  WBMP).  
§  FluXer  usa  o  arquivo    pubspec.yaml  (na  raiz  
do  projeto)  para  definir  assets  necessearios  
para  o  seu  app.  

7
 Pubspec.yaml:  registro  da  imagem.jpg  

§  Cada  projeto  FluXer  contém  um  arquivo  pubspec.yaml  

§  Lá  há  metadados  ,  escritos  na  linguagem  YAML  que  indicam  dependências,  
i.e.  quais  recursos  e  pacotes  a  sua  app  precisa  

§  No  caso  da  imagem,  remova  o  (#)  da  linha  assets  e  adicone  o  nome  do  
arquivo  imagem.jpeg,  com  ‘-­‐’  e  indentado  (importante!)  
Mais  detalhes  sobre  inclusão  de  assets  e  imagens:  
  https://flutter.dev/docs/development/ui/assets-and-images#specifying-assets

8
 Widgets  Stateful  

§  Um  stateful  widget  é  definido  como  qualquer  widget  que  altera  seu  
estado  durante  sua  vida  ú1l.    
§  Usualmente  um  Stateless  Widget  tem  um  ou  mais  StatefulWidget  como  
um  dos  seus  filhos.  
Stateless  widget:    que  usa  apenas  as  propriedades  (atributos)  passados  pelo  
widget  pai  na  sua  instanciação  para  fazer  a  renderização  e  não  possui  estado.  
São  estáNcos.  
§  Exemplo:    um  widget  ProgressBar  personalizado  que  usa  as  propriedades  
com  as  quais  ele  é  instanciado  para  exibir  o  progresso  para  o  usuário.  

Stateful  widgets  são  widgets  que  podem  alterar  dinamicamente  seu  

conteúdo  e  não  dependem  de  dados  está1cos  transmi1dos  durante  a  
instanciação.  
§  O  estado    pode  mudar  devido  ao  input  do  usuário,  de  uma  resposta  
assíncrona  ou  a  reação  a  outra  forma  de  mudança  de  estado.  São  
dinâmicos.  
9
 Definindo  o  estado  
§  Assuma  um  widget  para  exibição  de  uma  imagem  (que  será  
um  estado  mutável)  
§  Precisamos  sobreescrver  um  método  para  criar  um  estado:  
@override
_ImageState createState() => _ImageState();
§  _ImageState  deste  arquivo  é  manter  uma  referência  a  três  
propriedades  diferentes:  
ImageStream _imageStream;
ImageInfo _imageInfo;
bool _isListeningToStream = false;

•  existe  uma  função  chamada  _handleImageChanged  que  usa  a  

função  setState  da  classe  State  para  gerar  um  evento  quando  
a  imagem  1ver  mudado  

10
 Reagindo  a  um  evento  

§  Quando  a  imagem  muda,  o  widget  é  reconstruído  tendo  

esse  novo  estado  
§  Ou  seja,    a  imagem  rela1va  ao  imageInfo  atualizado  é  
carregada.  

§  O  widget  percebe  uma  alteração  de  referência  de  imagem  e  

atualiza  o  seu  estado  quando  isso  ocorre.    
§  Ou  seja,  o  stateful  widget  gerencia  seu  próprio  estado,  e  
não  depende  do  um  widget  pai  para  fazer  isso.  

Exemplos:  
§  Clickable  View  (estado  mofificado  através  de  um  user  input)  
§  widget  que  possui  uma  referência  a  uma  quan1dade  do  
item  selecionado  e  que  pode  ser  incrementado  ou  
decrementado  por  outros  botões  
11
 Incluindo  novos  Cards    
§  Cada  Card  =  Imagem  +  Título  
§  Precisamos  incluir  um  botão  “Add”,  como  primeiro  filho  de  Column  (em  
body  do  Scaffold
§  RaisedButton  terá  uma  propriedade  onPressed,  com  uma  função  
anônima  e  um  child  widget,  que  é  o  texto  do  botão  “Add  Product”  

12
 Adicionando  uma  margem  em  torno  do  botão  

§  Insere-­‐se  um  widget  Container  em  torno  do  RaisedButton  (Container  
será  o  widget  pai  de  RaisedBuXon)  
§  Define-­‐se  uma  margem  de  10  pixels  na  propriedade  margin.  
§  Uma  delas  é  EdgeInsets.all()

Fig.: RaisedButton virou child de Container, que foi apenas colocado

para definir a margem de 10 pixels

13
 Definindo  o  estado  (state)  de  um  Stateful  widget  
§  Quermos  que  o  clicar  do  botão  aumente  a  lista  de  produtos  exibidos,  mas  
isso  só  pode  ser  feito  em  um  Stafetul  widget    
§  Para  isso,  sobreescreve-­‐se  um  método    createState,  que  retorna  uma  
classe  State  específica;  
§  Essa  classe  (_MyAppState)  estende  State  e  através  do  State<MyApp>
fica  associado  à  classe  MyApp.  _MyAppState  é  privado  e  vai  conter  o  
build() do  materialApp  
§  Ou  seja,  o  estado  é  a  arvore  de  widgets  

14
 Gerenciando  Dados  dentro  de  um  Stateful  widget  
§  Adicionar  em  _MyAppState  uma  propriedade  com  a  lista  de  itens  
(Produtos)  
§  List  é  um  1po  genérico  que  requer  indicar  o  1po  dos  elementos  
<Strings>  
§  _products  contém  então  uma  lista  de  nomes  (de  alimentos)  
§  Engloba-­‐se  a  lsita  de  widgets  em  Column    
§  Subs1tui-­‐se  o  Card  (para  1  figura),  por  _products.map()  esse  vai  criar  um  
widget  para  cada  elemento  da  lista  

15
 Fazendo  o  Botão  adicionar  novos  elementos  

§  Em  onPressed() fazer  com  que  um  novo  elemento  na  lista  
§  Lista  é  incrementada  com  _products.add(‘NovoNome’)  
§  Mas  não  basta  modificar  a  lista,  precis-­‐se  avisar  FluXer  que  houve  uma  
mudança  no  estado  
§  Para  tal,  usa-­‐se  setState(),  que  faz  o  incremento  da  lista  _producs  

•  ListView  é  uma  forma  mehor  de  renderizar  uma  

lista  de  widgets.  
16
 Happy  Hacking!  
 
 
 
 
 

17
 Exercício  #1  

Baixe  o  Ex1  
hXps://bitbucket.org/account/user/endler/projects/FLUT  
Modifique  esse  aplica1vo:  
§  Insira  várias  imagens  (fotos  poucos  MB)  de  um  mesmo  
conceito  (planetas,  paises,  raças  de cães)  e  registrando-­‐os  
em  assets  
§  Crie  uma  classe  Pair,  que  recebe  o  nome  da  imagem  e  a  
string  e  retorna  uma  widget  Card
§  Cada  uma  deve  mostrar,  de  alguma  forma,  a  imagem  e  a  
string  
Obs:  widget  Card  é  usado  para  representar  e  mostrar  
informacões  relacionadas  a  uma  mesma  coisa,  mas  Container  
tb  serve.  
§  Use  o  widget  Column  ou  List  para  mostrar  os  vários  itens  um  
abaixo  do  outro  
§  Transforme  tudo  em  um  ListView  e  mostre  que  agora  pode  
fazer  scroll  na  lista  de  itens  (mairo  do  que  a  tela).  
18
 Exercício  #2  

Um  app  para  montar  um  lista  de  tarefas:    

§  Baixe  o  Ex2    
§  hXps://bitbucket.org/account/user/endler/
projects/FLUT  
Use  Stateful  widget  e    
List<String> _tarefas = [‘Dormir’]
Quando  o  usuário  clicar  o  botão,  vai  chamar  o  
método    _tarefas.setState(),  que  vai  
adicionar  um  novo  item  na  lista,  e  o  FluXer  irá  
atualizar  a  UI  
Em  vez  de  um  texto  iden1co,  deve  receber  um  
texto  qualquer  em  um  widget  TextField

19