Hoje vamos aprender como criar uma app simples e rápido no Flutter. Para quem não conhece o Flutter e precisa configurar o seu ambiente, todas essas informações você encontra no site do framework:
Obs: É preciso habilitar o desenvolvimento web e Para construir esse exemplo utilizei a versão 1.20.0
Iniciando seu primeiro projeto
Após a configuração o ambiente, iremos rodar o seguinte comando no terminal:
flutter create primeiro_projetocd primeiro_projeto
Vamos ter uma pasta com a seguinte organização:
Dentro do arquivo main.dart vamos excluir o seu conteúdo e digitar o seguinte código:
Você irá perceber que o Home() estará em vermelho, pois ainda não criamos o widget com esse nome.
Antes de começar precisamos entrar na pasta test e excluir o arquivo que está lá, pois quando iniciarmos ele tentará rodar um teste na classe MyApp(), mas ela não existe mais.
Dentro da pasta lib iremos criar uma pasta chamada ui e um arquivo chamado home.dart.
Dentro deste arquivos iremos criar um StatefulWidget, pois esse tipo permite atualizar o seu estado conforme a interação com o Widget. Por exemplo quando excluir um item da lista ou adicionar, ele atualiza a tela.
Copie o código abaixo e cole no seu arquivo home.dart.
Se você iniciar a aplicação a seguinte tela irá aparecer:
Agora vamos ver a classe home por partes.
Antes de criarmos a classe Home, no mesmo arquivo, temos que criar um objeto chamado tarefa. Esse objeto por enquanto terá apenas uma propriedade nome. Para iniciar essa classe pelo construtor, precisamos criar uma função sem corpo, com o nome da classe e passar as variáveis que desejamos atribuir. É necessário utilizar o this, pois senão as suas variáveis não serão atribuídas.
Dentro da classe _HomeState vamos criar um TextEditingController, que nos permite obter o conteúdo digitado num textfield. Também, iremos criar nossa List de tarefas e atribuir algumas tarefas.
Toda a parte visual do nosso app é criada dentro da função build, é dentro dela que vamos começar a colocar nossos widgets. Iremos utilizar o widget chamado scaffold, que cria uma estrutura de design de layout definindo cabeçalho e corpo conforme o material designer.
Definindo o AppBar
Para a propriedade appBar do scaffold, vamos passar um widget de mesmo nome.
Dentro dele vamos definir uma cor de fundo(backgroundColor) azul utilizando a classe Colors e sua propriedade Blue. Depois vamos definir um título(title) passando um widget Text e pra fechar vamos colocar esse título centralizado.
O resultado será esse:
Definindo o Body
Para iniciar o nosso corpo, vamos definir um espaço envolta dele para distanciar do AppBar e dos cantos. Nesse caso vamos colocar 20 pixel em todos os lados. Para fazer isso utilizaremos a propriedade padding e passamos a classe EdgeInsets.all(20).
Olhando para o nosso layout do aplicativo temos um campo input, ao seu lado um botão e embaixo uma lista de objetos. Para fazer essa ordenação uma embaixo da outra é preciso usar o Column, e para ordenar o widgets um do lado do outro é preciso utilizar o Row. Então eu preciso ter uma row dentro de uma Column. Esses Widgets possuem uma Array de Widgets que vão sendo ordenados na ordem inclusão.
Agora vamor ver a criação da Row com TextField e IconButton.
O TextField possui como controller a variável que criamos. Depois vamos alterar a decoração(InputDecoration) modificando a borda e olabel do campo. Por último alteramos o estilo dos caracteres que serão digitados.
O IconButton é um botão que possui apenas a imagem do icone, mas não o fundo. Então colocamos ele dentro do widget Ink para darmos a cor verde para o fundo do botão.
Na função onPressed verificamos se a variável textController não está vazia. Caso não esteja chamamos o SetState(Atualizador de estado do wiget) adicionando um novo objeto tarefa à lista.
Agora para finalizar vamos criar a lista de tarefa. Vamos utilizado o ListView.Builder onde vamos passar o tamanho da lista e no itemBuilder vamos retornar cada elemento da lista através de widgets. Podemos observar que a função do itemBuilder tem o index, utilizamos ele para obter a posição do elemento em uma lista.
O widget que vamos utilizar é o Dismissible, que nos dá a animação de arrastar para o lado e atribuir uma função quando acontecer isso. Definimos um container como background, e ele será vermelho e terá um icone de uma lata de lixo alinhado a direta.
O Dismissible precisa do elemento chave para aplicar o deslize, que será o nome da nossa tarefa. O filho do Dismissible será um card fazendo com que o card seja deslizado.
Agora vamos criar a função que é chamada quando deslizamos o elemento. Primeiro vamos guardar a referencia da tarefa selecionada e remover da lista. Depois disso vamos mostrar um snackbar onde o usuário pode desfazer a alteração e retornar a nossa referencia ao index removido.
Nosso sistema de criação de lista de tarefas está pronto. Agora podemos pensarmos em persistir as informações. Mas vamos deixar para um próximo artigo.
Vou deixar o link do repositório no github:
Qualquer dúvida só deixar nos comentários!!!
