# Configurando o Firebase no Flutter

Fala, devs. Blz? Hoje vamos dar continuidade a [série](https://ianoliveira.hashnode.dev/serie-dominando-o-firebase-em-aplicativos-flutter) "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](https://firebase.google.com/?hl=pt-br) 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](https://firebase.blog/posts/2022/05/whats-new-at-google-io) "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](https://docs.flutter.dev/get-started/install). Depois de configurar seu ambiente para desenvolder em Flutter, você pode executar o seguinte comando para criar um novo aplicativo:

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

No comando acima o **<mark>--org</mark>** é 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 **<mark>--platform=ios,android</mark>** impedirá a criação de dependências de aplicativos em outras plataformas como `Web`, `Desktop`etc.

### Instalação do Firebase 🔥

Para instalar o Firebase em um aplicativo Flutter costumava envolver muitas etapas de configuração [manual](https://www.digitalocean.com/community/tutorials/flutter-firebase-setup) específicas para cada plataforma, mas apartir da versão 2.8 do Flutter agora podemos [inicializar o Firebase](https://firebase.google.com/docs/flutter/setup?hl=pt-br&platform=ios) 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](https://www.digitalocean.com/community/tutorials/flutter-firebase-setup). Bora?

Antes de qualquer serviço do Firebase poder ser usado, você deve primeiro instalar o [`firebase_core`](https://pub.dev/packages/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.

```yaml
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](https://firebase.google.com/docs/cli?hl=pt-br#setup_update_cli), 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:
    
    ```bash
    firebase login
    ```
    
3. Depois de ter feito login com sucesso instale também para o Flutter com o comando:
    
    ```bash
    dart pub global activate flutterfire_cli
    ```
    

### 2 - Criando um novo projeto do Firebase

1. Acesse o site do [firebase console](https://console.firebase.google.com/) 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1710105405548/574a9a35-baf1-43fb-9ed4-6c0f78be4d64.png align="center")
    
    No campo **Nome do projeto**, insira **flutter-firebase-app** e clique em **Continuar** .
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1710105582426/45c1a177-53a3-4950-a154-90242f1d1c16.png align="center")

4. 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.
    
5. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1710106241581/613046e1-2abf-4da7-9ca5-50571ca0e213.png align="center")
    
    No diretório do projeto do Flutter que criamos, execute o seguinte comando para iniciar o fluxo de trabalho de configuração do app:
    
6. ```bash
       flutterfire configure
    ```
    
7. Supondo que já tenhamos feito login por meio da CLI do Firebase ( `firebase login`se não, execute-o), isso listará todos os projetos do Firebase disponíveis:
    
8. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1710337460724/5508b635-17cc-4e72-9554-38a0ff49c83c.png align="center")
    
    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.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1710202057361/512ad7d2-7b6a-4aa1-bc4e-235b0f90c752.png align="center")
    
    Depois de escolher e apertar **Enter** podemos ver que a configuração foi feita com sucesso 😎.
    
9. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1710202293242/1e624c02-c1fc-4652-80e2-7349f37c1aad.png align="center")
    
    Para confirmar abra o console do Firebase e navegue até configurações veja que dois aplicativos foram criados para o nosso projeto.
    
10. ![Aplicativos Firebase criados nas configurações dos projetos](https://cdn.hashnode.com/res/hashnode/image/upload/v1710202398718/1fddac27-3797-4f40-ba4f-5cfda68171de.png align="center")
    

### 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`.

```dart
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.dart`arquivo que foi gerado.

Agora rodando nosso aplicativo no simulador deu tudo certo ✅

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1710208002514/8281f982-ee5e-40c1-a4ab-324e2621cf30.png align="center")

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

Se quiser conferir o código esse é o [link](https://github.com/iang12/firebase-flutter-example) do repositório no [github](https://github.com/iang12/firebase-flutter-example)!

### **Conclusão**

Bom é isso 😎.

[![Dash e Spark ](https://cdn-images-1.medium.com/max/800/1*sE8kssKhfy8Hp0u4HfqCOQ.gif align="left")](https://dribbble.com/shots/22627336-Flutter-Firebase-Festival-Google)

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**](https://www.github.com/iang12) | [**LinkedIn**](https://www.linkedin.com/in/ianoliveirag12/) | [**Instagram**](https://www.instagram.com/ianoliveira.dev/) | [**Twitter**](https://twitter.com/ianoliveirag12) | [**Medium**](https://medium.com/@ianoliveirag12)