Uma aplicação Flutter simples usando o Firestore

Em muitos aplicativos existe a necessidade de acessar uma base de dados para gravar e recuperar informações fora do dispositivo do usuário. Dentre as opções de gerenciadores de base de dados existentes, o Firestore da Google se apresenta como uma solução interessante. O Firestore, parte da plataforma Firebase, oferece uma solução eficiente para armazenar dados em tempo real, perfeita para aplicativos que exigem atualizações instantâneas. Pode ser usada, inclusive, de forma gratuita, se aplicação não ultrapassar certos limites, como por exemplo, 50 mil consultas por dia.  

    No entanto, notamos que os tutoriais sobre o uso dessa ferramenta, em geral, são complexos, mesmo quando tentam ilustrar com uma aplicação simples. Isso ocorre porque as aplicações tentam ser um exemplo com as típicas operações de consulta, inserção, deleção e alteração. 

    Aqui propomos uma abordagem diferente. Acreditamos que, para o iniciante compreender as etapas principais para conectar  uma aplicação ao Firestore, basta uma aplicação simples que faça apenas uso da operação de consulta. 

    A aplicação Flutter que iremos usar neste tutorial é uma aplicação que simula uma previsão astrológica para um  signo pelos usuário. A simulação da previsão é feita buscando sentenças aleatórias armazenadas em uma base no Firestore. A simplicidade do código torna-o fácil de entender, sendo um ótimo ponto de partida para projetos mais complexos envolvendo o Firestore e o Flutter. Espero que este tutorial seja útil para começar a explorar a integração do Firestore em seus aplicativos Flutter!

    Gostaríamos de destacar que isto é apenas uma simulação, nenhuma previsão de ser levada a sério (risos).

Pré-requisitos

1) Flutter instalado. Veja como instalar o Flutter neste link.

2) Uma conta no Firebase. Veja como criar uma conta no Firebase neste link.

3) npm instalado. Veja como instalar o npm neste link,

Configurando o Firebase

O primeiro passo é configurar o Firebase para o seu projeto Flutter. Para isso, siga estas etapas:

1) Acesse o console do Firebase e clique no botão "Adicionar projeto".

2) Insira um nome para o seu projeto e clique em "Continuar". No nosso exemplo o nome do projeto é horoscopo.

3) Opcionalmente (mas recomendável) você pode ativar o Google Analytics para seu projeto.

4) Configure sua conta do Google Analytics e clique em "Criar projeto"

    

5) Após criar o projeto, no painel principal, clique em "Cloud Firestore" para iniciar a criação de uma base de dados.

6) Clique em "Criar Banco de dados".

7) Selecione a localização mais próxima possível para sua base.

8) Selecione, inicialmente, o modo de teste, para que seu banco possa que qualquer pessoa com a referência a seu banco possa alterá-lo. Isso é válido por um período de 30 dias.

9) Clique em "iniciar coleção" para criar uma nova coleção de dados. 

10) No nosso exemplo chamaremos a coleção de previsao.

11) Comece a inserir documentos na coleção, onde cada documento possui três campos como mostrado abaixo: indice, tema e texto. O indice é do tipo number e, no nosso exemplo, varia de 0 a 9 para tema. tema possui os valores saude, financas, e amor. O campo texto contém a previsão.

No nosso exemplo, inserimos 10 sentenças para cada tema, totalizando 30 sentenças. No final da inserção dos dados, a base ficara parecida com a figura abaixo:

Instalando o cliente Firebase para o Flutter

O próximo passo é instalar o cliente de linha de comando Firebase para o flutter. Existem outras formas de configurar a aplicação Flutter para o Firestore, mas consideramos que, por meio da linha de comando, essa tarefa é realizada mais facilmente.

1) Por meio do npm, instale o firebase-tools

$ npm install -g firebase-tools

2) Instale o flutterfire_cli

$ dart pub global activate flutterfire_cli

Criando e configurando a aplicação Flutter

Agora estamos prontos para iniciar a criação de nossa aplicação. Ao executarmos o app ele terá a seguinte aparência.

1) Criar o app pela linha de comando.

Execute o comando flutter create <nome app> --org <notação de domínio reversa>. No nosso exemplo, utilizamos o seguinte comando (não se esqueça de usar o seu domínio em notação reversa):

$ flutter  create horoscopo --org click.al2

2) Mude para o diretório da aplicação

$ cd horoscopo

3) Execute o comando de abaixo para ligar a aplicação ao projeto Firebase.

$ flutterfire configure

Siga as instruções para selecionar projeto Firebase que será associado à aplicação, assim como as plataformas operacionais (web, android, ios, etc.)

4) Inclua as dependências necessárias ao arquivo pubspec.yaml

$ flutter pub add cloud_firestore

$ flutter pub add firebase_core

Após a execução desses comandos o arquivo pubspec.yaml deve apresentar as dependências mostradas a seguir.

Como vamos incluir uma imagem em nosso aplicativo, vamos alterar o arquivo pubspec.yaml para especificar o diretório onde ficará a imagem.

A imagem que vamos utilizar para representar o zodíaco é mostrada a seguir:

Codificando a aplicação Flutter

Nesta etapa vamos mostrar o código do aplicativo Flutter que acessa a base no Firestore. No trecho abaixo mostramos as importações necessárias para realizar o acesso. Na linha 5, tempos a importação de um código gerado automaticamente pelo cliente Flutterfire, com as configurações para o acesso à base de dados.

    Na linha 7 é declarada uma variável que recebe um objeto classe Random, que será usado para gerar números aleatórios. Na linha 9 é declarada uma variável que receberá uma referência ao banco de dados. A linha 10 mostra o código para carregar uma imagem. Nas linhas 11 a 12 temos a declaração da lista com os nomes dos signos.

O trecho de código a seguir realiza, na linha 16, a inicialização assíncrona do Firebase, usando as opções geradas automaticamente. Por se assíncrona, usamos a palavra chave await como prefixo na linha para esperar a execução da inicialização. O uso da palavra chave await obriga que a função main() seja declarada com a palavra chave async.

 

O trecho de código a seguir é bem típico e mostra a criação do Widget principal do aplicativo que é um Widget sem estado. 

O trecho de código a seguir mostra a criação do Widget com estado e da classe de estado associada. Vamos descrever as linhas que consideramos relevantes. A linha 45, declara a variável que recebe uma instância do Firestore.  A linha 53 dentro da função que inicializa o estado, obtém uma referência à coleção que será acessada. 

O trecho de código a seguir mostra a função que é acionada quando o usuário clica no botão para realizar a previsão. A linha 57 mostra a geração de um número aleatório inteiro de 0 a 9. Esse número será usado para acessar sentenças aleatórias na base de dados. A linha 58 mostra a declaração da variável que armazena a consulta (query) que será feita a banco de dados. A linha 60 mostra a realização da consulta. Como a consulta é assíncrona, a palavra chave await é usada como prefixo da chamada.  Nas linhas 64 a 66 é feita a extração e concatenação das sentenças. 

O trecho de código a seguir mostra a função build(), que realiza a construção da árvore de widgets. Vamos descrever as linhas que consideramos relevantes. As linhas 88 a 95 codificam a exibição  do DropdownButton com a lista de signos. A seleção do signo é apenas decorativa, uma vez que a previsão é feita de forma aleatória, sem qualquer conexão com o signo.  As linhas 97 a 98 codificam a exibição da previsão. As linhas 99 a 103 codificam o botão que deve ser acionado pelo usuário para a realização da previsão.

O código da aplicação pode ser baixado do Github usando este link.

Chegamos ao final de nosso Post. Se esse Post foi útil para você, por favor, considere deixar um comentário.