Flutter: aplique offline first com SQFlite

SQLite e suas dependências - Apresentação

Boas-vindas a mais um curso de Flutter na Alura! Me chamo William Bezerra e serei o seu instrutor.

Audiodescrição: William se declara como homem pardo, com cabelos pretos, barba preta e óculos de armação hexagonal. Ao fundo, uma parede com iluminação em tons de rosa e azul.

O que vamos aprender?

Durante o curso, construímos o aplicativo Memorando, um gerenciador de tarefas de casa, aplicando os conceitos de Offline First com um banco de dados embutido no aplicativo. Esse banco de dados permite a criação de tarefas de casa.

Clicando no botão "Criar nova tarefa" no aplicativo é possível adicionar uma tarefa para "tirar o lixo", incluindo descrição, categoria que pode ser "Casa", responsável — que pode ser a pessoa usuária — e prioridade que será "Alta".

Adicionar tarefa

• Título: tirar o lixo
• Descrição: -
• Categoria: casa
• Nome do responsável: Will
• Prioridade: Alta

Ao salvar a tarefa localmente clicando no botão "Salvar" na parte inferior, acessamos o código e clicamos no botão com um ícone de seta girando na parte superior direita para recarregar o aplicativo.

Observe que ele permanecerá armazenado dentro do aplicativo, mesmo após recarregar o dispositivo ou o app.

Ao longo de todo o curso, desenvolvemos tanto a parte lógica, garantindo que os dados sejam salvos corretamente, quanto a parte estrutural, proporcionando a filtragem adequada.

Por exemplo, é possível filtrar apenas os itens não finalizados ou apenas os itens finalizados. Implementamos todos esses filtros na aplicação para garantir uma estrutura bem organizada, salva dentro do banco de dados local do dispositivo.

Além disso, trabalhamos nas interações dentro do próprio item. Por exemplo, ao marcar o item como concluído clicando no ícone de círculo cinza à direita da tarefa, ele é movido para a aba de "Finalizados". Também é possível alterar informações do item clicando no ícone de lápis e, no final, apagar o item do banco de dados clicando no ícone de lixeira, garantindo que tudo esteja atualizado e salvo corretamente no banco de dados local.

Ao final do processo, além de incorporar toda essa experiência no aplicativo, testamos função por função. Garantimos que as interações estejam funcionando corretamente, assegurando o pleno funcionamento do aplicativo, tanto no momento quanto para uso futuro.

Quais são os pré-requisitos?

Para realizar este projeto, é importante atender aos pré-requisitos.

Deve-se possuir um conhecimento básico em Flutter, um certo domínio sobre o funcionamento de bancos de dados relacionais, e já ter aprendido ou ter acesso ao conceito de banco de dados dentro do dispositivo. Além disso, é necessário ter uma boa base de testes unitários e compreender o funcionamento de uma API REST ou de um CRUD.

Conclusão

Te esperamos na próxima aula!

SQLite e suas dependências - Instalando as dependências SQFlite e path

Fomos contratados para dar continuidade ao desenvolvimento de um aplicativo que já possui todas as funcionalidades essenciais. Esse aplicativo é destinado à gestão de tarefas diárias, permitindo a criação de atividades, como "arrumar a casa".

Também é possível adicionar uma descrição, definir o horário para a realização da atividade, como no caso de sábado às 9 horas da manhã, e categorizá-la, como por exemplo, "casa".

Adicionar tarefa

• Título: arrumar a casa
• Descrição: sab às 9h
• Categoria: casa

As interações necessárias, como salvar, marcar a tarefa como concluída, editar, alterar o nome ou excluir, estão totalmente disponíveis.

Problemas nas interações

O problema reside nas interações, pois elas ocorrem de forma mockada (simulada). Não há salvamento de dados, e nossa tarefa é garantir que, ao adicionar uma nova tarefa, como "arrumar a casa", com descrição e horário, essas informações permaneçam salvas mesmo após reiniciar a aplicação com "Ctrl + Shift + F5" ou realizar qualquer outra interação.

Atualmente, ao reiniciar o aplicativo, todas as informações são perdidas, o que compromete a experiência da pessoa usuária.

Ferramentas utilizadas

Para que o aplicativo funcione offline, sem depender da internet, e para que todas as interações da pessoa usuária sejam salvas, utilizaremos o SQLite, um banco de dados relacional amplamente adotado pela comunidade mobile, incluindo no Flutter.

O SQLite será utilizado para armazenar essas interações, funcionando como um banco de dados local.

Adicionando os packages

Para isso, utilizaremos o package chamado SQFlite, que é a implementação do SQLite para Flutter. Esse package será adicionado à nossa aplicação. Além do SQLite, também precisaremos de um segundo package para fazer essas interações, o path, que possibilita salvar dados na memória do aplicativo, diretamente nos dados do dispositivo.

Esses packages serão integrados à nossa aplicação. Para isso, abriremos o terminal no VSCode com "Ctrl + J" e executaremos o comando:

flutter pub add sqflite path

Teclamos "Enter" para executar o comando. Isso adicionará os dois pacotes à nossa aplicação.

À esquerda, abrimos o arquivo pubspec.yaml para confirmar que os pacotes sqflite e path foram adicionados. O arquivo deverá conter as seguintes dependências:

dependencies:
  flutter_localizations:
    # comentários omitidos
  cuperino_icons: ^1.0.8
  provider: ^6.1.2
  google_fonts: ^6.2.1
  sqflite: ^2.4.1
  path: ^1.9.0

Com os pacotes adicionados, podemos iniciar a construção do banco de dados.

Construindo o serviço

Abriremos as pastas do projeto, acessaremos a pasta lib, depois a pasta data, e criaremos uma nova pasta chamada "services" clicando sobre "data" e selecionando a opção "New Folder" ("Nova pasta").

Dentro dessa pasta, criaremos um novo arquivo clicando na opção "New file" denominado local_database_services.dart, que será responsável pelo serviço de banco de dados.

Dentro desse arquivo, criaremos uma classe chamada LocalDatabaseService {}, que será responsável pela interação com o serviço de banco de dados. Vamos começar definindo a estrutura básica da classe:

class LocalDatabaseService {

}

Também criaremos uma variável para armazenar nosso banco de dados. Essa variável será estática e do tipo Database. Importaremos o package sqflite para isso. Caso o VSCode não importe automaticamente, podemos fazer manualmente com "import 'package:sqflite/sqflite.dart'".

Damos um nome para a variável com _database para esse dado ficar offline na nossa aplicação. Como essa variável inicia como nula, inserimos um ponto de interrogação após o Database.

import 'package:sqflite/sqflite.dart';

class LocalDatabaseService {
  static Database? _database;
}

Com isso, já temos um serviço com uma variável para armazenar nosso banco de dados.

Próximos passos

O próximo passo é criar o banco de dados e armazená-lo nessa variável, para então iniciar as interações e salvar os comandos que a pessoa usuária realizar dentro da aplicação.

SQLite e suas dependências - Configurando a conexão do app com o banco de dados SQFLite

O aplicativo já possui as dependências necessárias para a criação do banco de dados. Os pacotes foram instalados e a estrutura básica do serviço foi configurada.

Criando e inicializando o banco de dados local

Para garantir que o banco de dados seja criado ao realizarmos interações para ler, criar, editar ou apagar dados, iniciamos pelo LocalDatabaseService {}, onde criamos o serviço e inicializamos uma função que assegura a criação ou atualização do banco de dados. Dessa forma, garantimos que ele estará disponível para as interações.

Iremos inicializar e setar um banco de dados para a variável database para começarmos a efetuar as interações.

Dentro das chaves e após a criação da variável, criamos a função Future<void>, denominada init(), que será assíncrona com async() para iniciar a função, pois precisaremos de operações assíncronas.

import 'package:sqflite/sqflite.dart';

class LocalDatabaseService {
  static Database? _database;
    
    Future<void> init() async {}
}

Dentro dessa função, seguimos algumas etapas para garantir que o banco de dados seja criado. A primeira etapa consiste em obter o path do banco de dados, que representa o local onde ele será armazenado no dispositivo da pessoa usuária.

Criamos uma variável chamada path, que é atribuída ao valor retornado pela função getDatabasesPath(). Essa função fornece o caminho padrão do SQLite para essa interação. Com isso, obtemos o local onde o banco de dados será armazenado.

import 'package:sqflite/sqflite.dart';

class LocalDatabaseService {
  static Database? _database;
    
    Future<void> init() async {
        final path = getDatabasesPath();
    }
}

Em seguida, definimos o nome do banco de dados, ou seja, o arquivo do banco de dados. Criamos uma variável dbPath, que representa o banco de dados.

Sempre que nos referirmos a db, estaremos falando do banco de dados (database).

Criamos também um dbPath e utilizamos um método do pacote path para realizar um join, combinando o caminho com o nome da tabela, garantindo que o caminho esteja correto ao inicializar o banco de dados.

Chamamos a função join(), importamos o pacote path para o serviço. Para isso, selecionamos o ícone de lâmpada à esquerda da linha e clicamos na opção "import library 'package:path/path.dart'".

import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';

class LocalDatabaseService {
  static Database? _database;
    
    Future<void> init() async {
        final path = getDatabasesPath();
        final dbPath = join();
    }
}

Dentro do join(), passamos o caminho obtido anteriormente, que é o nome do banco de dados path. Em seguida, inserimos uma vírgula e, entre aspas simples, passamos o nome do banco de dados, que será tasks.db.

import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';

class LocalDatabaseService {
  static Database? _database;
    
    Future<void> init() async {
        final path = getDatabasesPath();
        final dbPath = join(path; 'tasks.db');
    }
}

A extensão .db é a extensão do arquivo, assim como .dart ou .sql. Com isso, o dbPath é criado. Adicionamos um await antes do getDatabasePath para garantir que fiquem nos mesmos parâmetros.

import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';

class LocalDatabaseService {
  static Database? _database;
    
    Future<void> init() async {
        final path = await getDatabasesPath();
        final dbPath = join(path; 'tasks.db');
    }
}

Criando o banco de dados

Com o caminho estruturado do banco de dados, podemos abri-lo, ou seja, criá-lo.

Para isso, utilizamos a função openDatabase() do SQLite, que retorna o banco de dados path, exatamente o que precisamos para nossa variável. Definimos nossa variável database como igual a openDatabase(), com um ponto e vírgula, e fazemos um await, pois a função é do tipo Future.

Isso criará e realizará todas as interações, inicializando dentro do banco de dados. Um ponto importante é que o parâmetro obrigatório é o caminho do banco de dados, que será o dbPath. Então mudamos de path para dbPath dentro dos parênteses.

// código omitido

        _database = await openDatabase(dbPath);
    }
}

Dentro do openDatabase(), ocorrem todas as interações para a criação do banco de dados. Precisamos passar alguns parâmetros para que essa criação seja realizada. Ao passarmos o cursor sobre o "openDatabase", obtemos as seguintes funções em uma janela flutuante:

Future<Database> openDatabase(

String path, {

int? version,

FutureOr<void> Function(Database)? onConfigure,

FutureOr<void> Function(Database, int)? onCreate,

FutureOr<void> Function(Database, int, int)? onUpgrade,

FutureOr<void> Function(Database, int, int)? onDowngrade,

FutureOr<void> Function(Database)? onOpen,

bool? readOnly = false,

bool? singleInstance = true,

})

Existem funções como onConfigure, onCreate, onUpgrade e onDowngrade, que são executadas durante a criação do banco de dados. Por exemplo, após o dbPath podemos inserir a função onCreate: que será chamada no momento de criação do banco de dados.

Ao criar o banco de dados, utilizamos o debugPrint() para exibir uma mensagem indicando que o banco de dados foi criado.

// código omitido

        _database = await openDatabase(
        dbPath,
        onCreate: (db, version) {
                debugPrint("Banco de dados criado!");
            },
        );
    }
}

Salvamos as alterações com "Ctrl + S". Dessa forma, ao criar o banco de dados será executado um print() de forma automática.

Definindo a versão do banco de dados

Outro ponto importante ao abrir o banco de dados é definir sua versão, pois ele trabalha com versões. Precisamos saber em qual versão cada pessoa usuária está. Cada alteração deve ser acompanhada de uma atualização na propriedade version para alterar o seu valor.

// código omitido

        _database = await openDatabase(
        dbPath,
        version: 1,
        onCreate: (db, version) {
                debugPrint("Banco de dados criado!");
            },
        );
    }
}

Com isso, temos a inicialização do banco de dados pronta. Vamos testá-la.

Alterando o arquivo dependencies

Abriremos as dependências do projeto à esquerda. Temos uma pasta chamada "config" e, dentro dela, um arquivo chamado dependencies. Neste arquivo, temos uma lista de dependência e, no final dessa lista, adicionaremos um Provider(), que no create, retornará o localDatabaseService, o serviço que utilizaremos. Adicionaremos o tipo desse provider como <localDatabaseService>.

dependencies.dart

// código omitido

        Provider<localDatabaseService>(
            create: (context) => localDatabaseService(),
        ), // Provider
    ];
}

Com isso, injetamos o serviço na aplicação, o que permite recuperá-lo em diferentes contextos.

Para testar a criação, chamamos a função de inicialização ao iniciar o aplicativo. Ao carregar a primeira tela, chamamos a função de inicialização para verificar se o banco de dados foi criado corretamente. Esperamos visualizar um print indicando que o banco de dados foi criado.

Abrimos a pasta "ui", em seguida acessamos as pastas "widgets" e o arquivo home_screen.dart. Dentro de home_screen, criamos a função void initDatabase() {}.

Nessa função, declaramos uma variável para o service, que recebe o valor de Provider.of(context), com o tipo <LocalDatabaseService> após o of. Não é necessário ouvir, apenas ler, por isso definimos o listen como false. Após o fechamento de parênteses, chamamos o service.init() para inicializar a função.

home_screen.dart

// código omitido

void initDatabase() {
  final service = Provider.of<LocalDatabaseService>(
    context,
    listen: false,
  );
    
    service.init();
}

// código omitido

Adicionamos a função initDatabase() ao initState da aplicação, aproximadamente na linha 167.

// código omitido

@override
void initState() {
  super.initState();
  Future.microtask(() {
    taskViewModel.loadTasks();
  });
  initDatabase(); 
}

// código omitido

Salvamos as alterações.

O banco de dados está inicializado e, em teoria, funcional. Executamos no emulador, paramos a versão atual clicando no ícone de quadrado na parte superior direita ("Shift + F5") e executamos uma nova build clicando no ícone de play à esquerda e depois em "Run and Debug".

Verificamos o funcionamento do banco de dados. Quando o emulador iniciou, confirmamos que o evento foi disparado e o print indicou que o banco de dados foi criado.

O aplicativo está sendo exibido na tela do emulador. Na parte superior, encontra-se o título "Memorando". Abaixo, há uma seção chamada "Tarefas de casa", com um ícone de uma pessoa jogando lixo à direita. Abaixo dessa seção, está o botão "Criar nova tarefa".

No terminal, temos a seguinte mensagem:

Banco de dados criado!

Próximos passos

O próximo passo é criar as interações, que abordaremos na próxima etapa.

Sobre o curso Flutter: aplique offline first com SQFlite

O curso Flutter: aplique offline first com SQFlite possui 192 minutos de vídeos, em um total de 53 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• SQLite e suas dependências
• Tabelas, dados e onCreate
• Listagem, filtros, edição e exclusão
• Versões e JOIN
• Ajuste e testes para SQLite