Criando um aplicativo para lembrar dos objetos emprestados com Flutter e Sembast
Notas de aula do professor Kleber de Oliveira Andrade
Se alguém lhe pedir algo emprestado, dê-lhe logo o objeto de presente. É muito caro ou muito querido e você não pode dá-lo de presente? Então, também é muito precioso para emprestar.
É impressionante como emprestar algo tem sempre as mesmas consequências há milênios e as pessoas continuam emprestando. As consequências sempre são:
- Você fica sem o seu objeto, pois o amigo não o devolve;
- Você recebe o objeto de volta, danificado;
- Você perde o amigo;
- Você esquece que emprestou e seu amigo “esquece” que pegou emprestado.
Vamos amenizar esse problema, criando um aplicativo para você lembrar dos seus empréstimos e poder cobrar no futuro ou lembrar de devolver.
Criando o projeto
Abra o Visual Studio Code, e abra a paleta de comandos (Ctrl + Shift + P) e digite: Flutter: New Project
- Digite o nome do projeto Flutter (borrowed_stuff);
- Selecione a pasta para criar o projeto Flutter;
Estrutura do projeto
Nosso projeto, seguirá o modelo MVC (Model-View-Controller) de desenvolvimento.
A figura abaixo apresenta um diagrama resumindo as conexões do modelo:
- View são classes que implementam a interface do usuário do aplicativo que está sendo construído.
- Controller é a classe que controla o fluxo geral do programa, contém lógica de negócios e serve como um link entre a visualização, o modelo e a DAO.
- Modelo descreve a estrutura de dados utilizada também no banco de dados.
- DAO (Data Access Object) é uma classe que manipula dados contidos em um banco de dados. A manipulação pode estar na forma de Criar, Ler, Atualizar ou Excluir (CRUD).
- Banco de dados (database) contém a classe cuja tarefa é abrir uma conexão com um banco de dados específico e atribuir objetos de conexão a classes DAO que requerem conexão.
Por isso, dentro do projeto teremos um diretório chamado lib, e a arvore de arquivos deve ser como a apresentada abaixo:
Dependências
No arquivo pubspec.yaml adicione as seguintes dependências para este projeto
Programa Principal
Vamos atualizar o arquivo main.dart
Criando o Modelo
Crie uma classe Stuff (lib → models → stuff.dart), que servirá para armazenar as informações de um objeto emprestado.
Instale o plugin Dart Data Class Generator que vai facilita a sua vida na hora de escrever a classe, pois você só vai precisar escrever os atributos que o construtor e os métodos é criado pelo plugin.
Persistindo Dados
Dados persistentes são importantes para os usuários, pois seria inconveniente para eles digitar suas informações sempre ou aguardar a rede carregar os mesmos dados novamente. Em situações como essa, seria melhor salvar seus dados localmente.
Para armazenarmos os dados, iremos utilizar o SEMBAST (Simple Embedded Application Store database) — mais uma solução de banco de dados de armazenamento persistente NoSQL para aplicativos de processo único. Todo o banco de dados baseado em documentos reside em um único arquivo e é carregado na memória quando aberto. As alterações são anexadas imediatamente ao arquivo e o arquivo é compactado automaticamente quando necessário.
Classe AppDatabase
Crie a classe AppDatabase (lib → database→ app_database.dart), esta classe será utilizada para persistência dos dados. Iniciaremos criando um Singleton (Design Pattens)
Por que precisamos de singleton: usamos o padrão singleton para garantir que tenhamos apenas uma instância de classe e forneçamos um acesso de ponto global a ele.
Para criarmos banco de dados e mantermos uma instância única do objeto, vamos escrever o seguinte código
Classe StuffDao
Crie a classe StuffDao (lib → database→ stuff_dao.dart), que servirá para manipular os dados do Banco de Dados.
Criando o Controller
Crie a classe HomeController (lib → controllers → home_controller.dart), que servirá para manipular os dados do Banco de Dados.
Criando Widgets
Para organizar melhor nossos códigos, iremos criar alguns Widgets separados. Vale ressaltar que essa prática é ótima, principalmente para você conseguir reaproveitar componentes nos próximos projetos, além de organizar melhor seu projeto.
Classe BackDialog
Vamos inicialmente criar uma classe BackDialog (lib → components → back_dialog.dart), que apresentará um AlertDialog exibindo uma mensagem fixa.
Classe CenteredCircularProgress
Crie a classe CenteredCircularProgress (lib → components → centered_circular_progress.dart), que apresentará um Container para exibir um circulo animado que indica o progresso do carregamento. Para isso será utilizado o widget CircularProgress.
Classe CenteredMessage
Crie a classe CenteredMessage (lib → components → centered_message.dart), que apresentará um Container para exibir uma mensagem e ícone no centro.
Classe PhotoContainer
Agora vamos criar a classe PhotoContainer (lib → components → photo_container.dart), que apresentará uma área retangular que ao ser clicada, irá abrir a opção de tirar foto. Para isso, utilizaremos o GestureDetector e ImagePicker.
Para que o ImagePicker funcione, precisaremos adicionar algumas permissões no android -> app -> src -> main -> AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
Classe StuffCard
Crie a classe StuffCard (lib → components → stuff_card.dart), que representa um card de objetos emprestados. Neste card utilizaremos funções que serão passadas no construtor, além de usarmos os widgets Slidable e CircleAvatar.
Criando as Views
Nesta etapa criaremos 2 classes para desenhas as telas do nosso aplicativo
Classe HomePage
Crie a classe Helpers (lib → pages → home_page.dart), que utilizaremos para criar uma lista, para exibir cartões dos objetos emprestados.
Classe StuffDetailPage
Crie a classe StuffDetailPage (lib → pages→ stuff_datail_page.dart), que irá desenhar o formulário para que o usuário possa anotar o objeto emprestado.
Classe Validator
Crie a classe Helpers (lib → controllers → validator.dart), que utilizaremos para criar os métodos de validações de cada campo do formulário.
Resultados
Agora, aperte F5 para iniciar a depuração do projeto
Selecione um emulador existente ou crie um novo se for necessário. Se seu celular estiver plugado no computador e com o modo desenvolver ativado, você poderá rodar o aplicativo direto no celular.
Conseguiu chegar até aqui? Parabéns, você acaba de criar um aplicativo para lembrar dos seus objetos emprestados. Tome cuidado agora para não perder mais nada.
O código completo pode ser baixado aqui.
Espero que tenham gostado, deixem seus comentários a baixo e um forte abraço!
Desafio
- Adicionar um campo TextFormField parar armazenar o telefone para contato (validação de telefone, RegEX e plugin BrasilFields para formatar os campos); Não se esqueça de modificar a classe Stuff para receber o telefone também.
- Validar todos campos do formulário: data de empréstimo deve ser menor ou igual a data de hoje; descrição não pode ser vazio; nome não pode ser vazio; telefone não pode ser vazio e precisa ter a quantidade de números adequada; Você pode adicionar essa validação entendendo mais sobre TextFormField
- Adicionar uma animação na lista de objetos (documentação, vídeo tutorial);
- Implementar um tema (cores) personalizadas, incluindo fontes e tamanhos (utilize o panache para facilitar a configuração das cores).
- Adicionar um botão no StuffCard ao deslizar para esquerda, para realizar uma ligação para o número de telefone, caso ele exista; (plugin url_launcher e tutorial);
