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