Criando uma Lista de Tarefas com Flutter
Notas de aula do prof. Kleber de Oliveira Andrade
No início do século XX o presidente da Bethlehem Steel, Charles M. Schwab, apresentou ao jornalista Ivy Lee, considerado por muitos como o fundador das relações públicas, um desafio fora do comum: “Mostre-me uma maneira de conseguir a execução de mais coisas. Se der resultado, pagarei qualquer quantia razoável”.
Lee entregou uma folha de papel a Schwab e disse: “Relacione as tarefas que terá de executar amanhã”, Schwab atendeu o pedido. Lee pediu em seguida: “Agora enumere as tarefas na ordem de sua verdadeira importância”, Schwab fez isso. Lee então recomendou: “A primeira coisa que deve fazer amanhã cedo é executar a tarefa número um. Em seguida, passe a número dois e não faça mais nada enquanto não concluir esta atividade. Depois faça o mesmo com a número três e assim por diante. Se não puder executar todas as tarefas, não se preocupe, porque pelo menos você cuidou de tudo o que era mais importante antes de ter sua atenção desviada para imprevistos, interrupções e detalhes menos importantes. O segredo está em fazer isso todos os dias. Avalie a importância das coisas que tem para fazer, estabeleça prioridades, escreva um plano de ação e mantenha-se nele. Faça isso todos os dias. Depois de ficar pessoalmente convencido do valor do sistema, peça ao seu pessoal que faça a mesma experiência. Teste o sistema quanto tempo quiser e, no momento oportuno, mande-me um cheque no valor que você achar justo”.
Poucas semanas depois Charles Schwab enviou a Ivy Lee um cheque de U$ 25.000. Schwab dizia que esta lição foi a mais proveitosa que ele aprendeu em toda a sua carreira empresarial.
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 (todo_list);
- Selecione a pasta para criar o projeto Flutter;
Estrutura do projeto
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
Sobre as dependências:
- path_provider: https://pub.dev/packages/path_provider
- sqflite: https://pub.dev/packages/sqflite
- flutter_slidable: https://pub.dev/packages/flutter_slidable
- flushbar: https://pub.dev/packages/flushbar
Programa principal
Vamos atualizar o arquivo main.dart
Vale ressaltar que a classe HomePage ainda não existe, por isso o arquivo terá um erro neste momento. Se quiser já resolver este problema, é só criar a classe HomePage (StatefulWidget)
Classe Task
Crie uma classe Task (lib → models → task.dart
), que servirá para armazenar o nome titulo da tarefa, uma descrição da tarefa e também um campo para saber se ela já foi concluída.
Persistência de 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 SQLite. O SQLite é uma escolha popular como software de banco de dados incorporado para armazenamento local/cliente em aplicativos.
Classe TaskHelper
Crie uma classe TaskHelper (lib → helpers→ task_helper.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
Inserir dados (Create)
O pacote SQFlite
fornece duas maneiras de lidar com essas operações usando consultas RawSQL ou usando o nome da tabela e um mapa que contém os dados:
Usaremos o método insert para passar um mapa
Ler tarefa por Id (Read)
No código acima, fornecemos à consulta um ID como argumento usando whereArgs. Em seguida, retornamos o primeiro resultado se a lista não estiver vazia; caso contrário, retornamos nulos.
Ler todas as tarefas (Read)
Neste exemplo, usamos rawQuery para mapear a lista de resultados para uma lista de objetos do tipo Task:
Atualizar (Update)
Excluir Task por Id (Delete)
Excluir todas Tasks (Delete)
Classe TaskDialog
Crie uma classe TaskDialog (lib → views→ task_dialog.dart
), que servirá para criar e editar tarefas.
Código para criar o AlertDialog apresentado na figura acima.
Classe HomePage (Lista de Tarefas)
Criando a HomePage e exibindo uma lista (ListView) com as tarefas
Exibindo uma tarefa
Adicionando ações na tarefa
Adicionaremos um Slidable para criar ações de editar ou excluir o item da lista
Adicionando ou Editando uma tarefa
Usaremos a classe TaskDialog para adicionar uma nova tarefa ou editar uma.
Excluindo uma tarefa
Após excluir a tarefas usamos o Flushbar para criar um Snackbar e avisar o usuário que a ação foi realizada, e permitindo que ele desfaça a ação.
Resultado
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 uma lista de tarefas para o seu dia-a-dia.
O código completo pode ser baixado aqui.
Espero que tenham gostado, deixem seus comentários abaixo e um forte abraço!
Desafios
- Na lista de tarefas, adicionar divisões entre as linhas (use ListView.separated)
- Adicionar validações no cadastro de uma atividade (lembre-se que é preciso utilizar o widget TextFormField para isso)
- Campo descrição precisar aceitar múltiplas linhas
- Criar um campo para nível de prioridades que aceita valores entre 1 (baixa prioridade) e 5 (alta prioridade). Representar isso no card da forma como achar mais interessante.
- Adicionar um PercentIndicator circular na barra de navegação para indicar a porcentagem de tarefas concluídas
Material de apoio para SQLite
- Persist data with SQLite
- Step by step explanation of SQLite using SQFlite https://medium.com/flutter-community/using-sqlite-in-flutter-187c1a82e8b
- SQFlite Database in flutter https://medium.com/@mohamedraja_77/sqflite-database-in-flutter-c0b7be83bcd2
- sqflite MVP app: https://www.youtube.com/watch?v=Yzfxqd9-6QY
- Adding SQLite to a Flutter App for Offline Support: https://www.youtube.com/watch?v=zEqH2qYs7Pg