Faaala devs! Como viram anteriormente nas partes 1 e 2, começamos a desenvolver uma ‘Todo list’ com Flutter, e nesta parte 3, iremos continuar nossa aventura! Pega um cafezinho e bora lá!
Nosso código até agora está mais ou menos assim:
Sem mais delongas, vamos dar uma otimizada em um negocinho no código que o Flutter disponibiliza pra gente, que é o CheckBox. Existem dois tipos de CheckBox no Flutter: o CheckBox por si só, que corresponde ao ícone que é possível marcar e desmarcar, e o CheckBoxListTile, que tem como principal diferença a presença de um label (etiqueta)! Então, no nosso caso, iremos trocar esta parte toda feita na mão:
Por esta:
Se vocês rodarem o projeto novamente, verão que essencialmente continua a mesma coisa, onde, do lado esquerdo temos o título do nosso todo, e do lado direito o checkbox em si. Bom, o CheckboxListTile traz pra gente não só esta facilidade de colocar um título, como também algumas outras propriedades bem interessantes como alterar a cor do check e até mesmo a cor de fundo, além de ser possível colocar algum widget do lado esquerdo do todo, como um ícone, e várias outras coisinhas que veremos mais pra frente.
Agora que otimizamos um pouco nosso código, vamos implementar algumas melhorias também! Acho que já devem ter percebido, mas nossa ‘Amazing Todo List’ não tem nenhum local que seja possível adicionar um todo novo!! E é isto que iremos fazer agora, bora lá!
ADICIONANDO APPBAR
Poderíamos fazer de diversas formas a adição de uma caixa de texto para inserir um todo novo na nossa aplicação, mas, que tal fazermos de uma forma não muito comum só para verem o que é possível ser feito com Flutter? Bora lá então!
Vamos adicionar uma Appbar ao nosso aplicativo, mas não vai ser qualquer Appbar, vai ser uma SliverAppBar! Verão a diferença daqui a pouco, aguardem!
Primeiramente precisamos alterar um pouco a forma que nossa lista de todos é feita:
Ao rodar o aplicativo novamente, verão que não foi alterado nada visualmente, mas agora que vem o tchan do SliverAppBar!
Vamos modificar um pouco mais nosso código, como a imagem abaixo:
Foram adicionadas algumas propriedades ao nosso widget SliverAppBar, e resumidamente vamos ver o que cada propriedade faz:
- title: é o título em si da appbar.
- expandedHeight: é o tamanho que a appbar vai expandir para mostrar algum conteúdo, e é aí que entra a função principal de um SliverAppBar! Quando rodarmos o aplicativo veremos na prática.
- pinned: opção para tornar a appbar fixa no topo ou não depois que o usuário rolar a lista.
- floating: opção para permitir ou não que a appbar apareça, mesmo não rolando a partir do topo da lista.
- flexibleSpace: é o widget que será mostrado quando a appbar estiver expandida. Normalmente é associado um FlexibleSpaceBar e depois, dentro da propriedade background, é colocado o widget que deseja mostrar.
Bom, essas são algumas propriedades, existem outras mas não iremos utilizar nesta parte. E agora vamos ver o que tudo isso causou à nossa aplicação para entendermos melhor!
Como podemos reparar acima, conforme deslizamos os itens da nossa lista a appbar expande ou contrai, e é justamente este o efeito do widget SliverAppBar! Ps: Foi copiado e colado várias vezes os itens da lista para poder dar volume.
Agora que entendemos melhor o conceito e a prática do SliverAppBar podemos modificar do jeito que desejarmos. Como está faltando uma barra para adicionar um novo item, vamos fazer isso agora!
Primeiro precisamos modificar o Container do nosso FlexibleSpaceBar como se segue:
Vamos entender melhor as mudanças!
- 1º foi adicionado uma margin e um alignment para poder posicionar nosso campo de texto no lugar correto.
- 2º foi adicionado o nosso campo de texto propriamente dito, TextField, com algumas propriedades.
Vamos agora ver melhor estas propriedades adicionadas do TextField:
- onSubmitted: função que será disparada quando o usuário submeter o texto (apertando o botão de confirmar do teclado por exemplo), enviando o texto submetido como parâmetro.
- controller: controlador para nosso TextField, o que permite modificar várias propriedades do TextField. Veremos depois seu uso na prática.
- decoration: propriedade que recebe um widget InputDecoration para modificar o estilo do TextField.
Propriedades do InputDecoration:
- filled: preenchido – indica se deve ou não preencher o interior do TextField.
- fillColor: cor de preenchimento.
- hintText: texto de “dica” para ajudar a identificar o campo;
- focusedBorder: borda para contornar nosso TextField quando o campo estiver focado e sem erros.
- enabledBorder: borda para contornar nosso TextField quando o campo estiver ativado e sem erros.
Propriedades do OutlineInputBorder:
- borderSide: propriedade que recebe um widget BorderSide que modifica o lado da borda.
- borderRadius: propriedade que recebe um widget BorderRadius que define o tipo da borda.
Propriedades do BorderSide:
- color: cor da borda.
- width: define o comprimento da borda, mas na prática é a espessura dela.
Agora que vimos alguns widgets usados e suas propriedades, poderíamos rodar as modificações no aplicativo, porém segura um momentinho aí gafanhoto, vamos criar nosso controller e o método onSubmitted para que não haja erros quando compilarmos!
No topo da nossa classe _HomePageState, adicionaremos um TextEditingController, que é o widget responsável por controlar as edições em um TextField, como a imagem a seguir:
Agora falta criarmos o método que irá adicionar o novo item à nossa lista, que será ativado quando o usuário submeter o texto, bora lá!
Dentro da nossa classe novamente, em qualquer lugar acima do método build vamos adicionar o seguinte código:
O método acima irá receber o novo item a ser adicionado, onde ele será formatado para o objeto que corresponde ao nosso todo. Na sequência, será feito uma chamada de alteração ao estado da nossa aplicação para informar que será preciso renderizar novamente tudo que está utilizando o array data. Por fim, será utilizado o método add para adicionar nosso novo todo à nossa lista de todos!
No fim do método há _todoInputController.clear() pois, quando o usuário submeter o texto, o mais interessante ao usuário é poder escrever outro texto logo em seguida, mas se não apagarmos a caixa de texto, o texto anterior ainda estará lá. Por isso, precisamos limpar a caixa de texto usando o controller do TextField e chamando o método clear.
Ufa! Agora sim podemos rodar todas essas modificações e ver o que vai rolar!
Se tudo ocorreu bem, o aplicativo estará rodando conforme a imagem acima. Agora nossa aplicação tem mais cara de aplicação não? Conseguimos ver os todos, adicionar novo todo, mas o que ta faltando… remover! E se inserirmos algo errado, o que fazer? Bom, é isto que iremos ver na próxima parte! Muito obrigado quem leu até aqui. Se tiver algum sugestão ou dúvida, só nos informar!
DicaEz: Se quiserem olhar o projeto, aqui está um link para o mesmo no Github: https://github.com/RickMartian
