Configurando o Firebase no Flutter

Série: Dominando o Firebase em Aplicativos Flutter

Configurando o Firebase no Flutter

Fala, devs. Blz? Hoje vamos dar continuidade a série "Dominando o Firebase em Aplicativos Flutter" uma sequência de artigos sobre as principais funcionalidades do Firebase e como integrá-las ao seu aplicativo Flutter.💙

O Firebase realmente é uma ferramenta muito boa e que acelera muito o desenvolvimento de novos aplicativos, ele é de fácil integração com o Flutter.

Seja para autenticação de usuários, armazenamento de dados, envio de notificações push ou captura e análise de erros, seus produtos sempre me ofereceram a solução perfeita.

Segundo o blog oficial do Firebase "Mais de 3 milhões de desenvolvedores, de startups a empresas, usam o Firebase para alcançar e envolver bilhões de usuários"

Hoje meu objetivo é abordar a instalação do Firebase da maneira certa. Então vem comigo. 🤏🏻 👨🏻‍💻

Criando um novo projeto Flutter

Antes de instalar o Firebase vamos criar uma aplicação Flutter nova do zero para esse tutorial. Caso você não tenha ainda o SDK do Flutter instalado clique aqui. Depois de configurar seu ambiente para desenvolder em Flutter, você pode executar o seguinte comando para criar um novo aplicativo:

flutter create --org com.labs flutterfirebaseapp --platform=ios,android

No comando acima o --org é o nome da sua organização responsável pelo seu novo projeto Flutter, em notação reversa de nome de domínio. Essa string é usada em nomes de pacotes Java e como prefixo no identificador de pacote configurável do iOS. (o padrão é "com.example") mas nós nomeamos para com.labs como nome de exemplo de domínio para esse app.

💡 Outra coisa que fiz para minimizar o tamanho do projeto é definir apenas as plataformas para as quais vamos construir o aplicativo. Nesse caso especifiquei android/ios. Esse comando --platform=ios,android impedirá a criação de dependências de aplicativos em outras plataformas como Web, Desktopetc.

Instalação do Firebase 🔥

Para instalar o Firebase em um aplicativo Flutter costumava envolver muitas etapas de configuração manual específicas para cada plataforma, mas apartir da versão 2.8 do Flutter agora podemos inicializar o Firebase de uma nova forma diretamente do Dart.

Isso é possível graças à nova ferramenta FlutterFire CLI , que pode gerar a configuração correta do Firebase para o nosso projeto.

Nesse post vamos ver a forma nova que é mais prática e rápida mas se você ainda quiser usar a maneira antiga clique aqui. Bora?

Antes de qualquer serviço do Firebase poder ser usado, você deve primeiro instalar o firebase_core plugin, que é responsável por conectar seu aplicativo ao Firebase.

Adicione o plugin no pubspec.yaml do seu app e depois execute o comando flutter pub get basta salvar o arquivo e ele executará automaticamente o download da dependência.

dependencies:
  firebase_core: ^2.27.0

1 - Instalando as ferramentas de linha de comando necessárias

  1. Como o FlutterFire CLI é uma ferramenta de linha de comando, precisamos instalá-lo primeiro: Instale aqui, caso ainda não tenha feito isso.

  2. Agora no terminal faça login no Firebase com sua Conta do Google executando o seguinte comando:

     firebase login
    
  3. Depois de ter feito login com sucesso instale também para o Flutter com o comando:

     dart pub global activate flutterfire_cli
    

2 - Criando um novo projeto do Firebase

  1. Acesse o site do firebase console e faça login com a sua conta do Google e então, vamos criar um novo projeto.

  2. No console, clique em Adicionar projeto.

  3. Criando um novo projeto do Firebase

    No campo Nome do projeto, insira flutter-firebase-app e clique em Continuar .

  1. Clique nas opções de criação do projeto. Se solicitado, aceite os termos do Firebase, mas ignore a configuração do Google Analytics porque você não o usará neste aplicativo.

  2. No diretório do projeto do Flutter que criamos, execute o seguinte comando para iniciar o fluxo de trabalho de configuração do app:

  3.     flutterfire configure
    
  4. Supondo que já tenhamos feito login por meio da CLI do Firebase ( firebase loginse não, execute-o), isso listará todos os projetos do Firebase disponíveis:

  5. Depois de escolher o projeto correto vamos selecionar para quais plataformas queremos configurar o firebase, no nosso caso escolha Android e IOS. A CLI registra automaticamente o aplicativo para essas plataformas no console do FIrebase.

    Depois de escolher e apertar Enter podemos ver que a configuração foi feita com sucesso 😎.

  6. Para confirmar abra o console do Firebase e navegue até configurações veja que dois aplicativos foram criados para o nosso projeto.

  7. Aplicativos Firebase criados nas configurações dos projetos

3 - Inicializando o Firebase no seu aplicativo

Após a conclusão da etapa anterior, navegue até o seu código da pasta lib e veja que foi criado um arquivo novo firebase_options.dart .

Esse arquivo geralmente contém informações como o ID do projeto do Firebase, a chave de API, o ID do aplicativo, a URL do banco de dados em tempo real, entre outros detalhes de configuração necessários para estabelecer a conexão entre o aplicativo e os serviços do Firebase.

Para finalizar a integração vamos inicializar o Firebase apartir do nosso método main.

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

o WidgetsFlutterBinding é uma parte importante do ciclo de vida do aplicativo Flutter e pode ser usado para inicializar o Firebase juntamente com o aplicativo Flutter.

O DefaultFirebaseOptions.currentPlatformé importado do nosso firebase_options.dartarquivo que foi gerado.

Agora rodando nosso aplicativo no simulador deu tudo certo ✅

Depois de inicializado, você estará pronto para começar a usar as funcionalidades do Firebase 🤩.

Se quiser conferir o código esse é o link do repositório no github!

Conclusão

Bom é isso 😎.

Dash e Spark

Neste artigo, você aprendeu como configurar e preparar nossos aplicativos Flutter para serem usados ​​com o Firebase.

Em artigos futuros da série, veremos como usar recursos do Firebase, como Cloud Firestore, Authentication, Crashlytics, Remote Config e muito mais com Flutter.

Espero que você tenha gostado! Compartilhe-o com seus amigos e colegas!

Juntos, vamos construir apps incríveis que transformam o mundo!

Se tiver alguma dúvida ou contribuição, deixe nos comentários!

Me siga para estar sempre por dentro dos próximos artigos 📲 🚀

🌐 Minhas redes sociais 🌐

GitHub | LinkedIn | Instagram | Twitter | Medium