Configurar Google Firebase en proyecto Flutter

Hoy vamos a aprender cómo podemos configurar Google Firebase en un proyecto Flutter.

Lo primero que tenemos que hacer es crear nuestro proyecto Firebase, para ello vamos a https://firebase.google.com/

Y pulsamos en Ir a la consola:

Elegimos Agregar Proyecto

Elegimos un nombre para la APP. Podemos elegir si queremos activar Google Analytics.

Esperamos a que el proyecto se configure y pulsamos en continuar:

Ahora instalamos Firebase CLI: https://firebase.google.com/docs/cli?hl=es-419#setup_update_cli

Descargamos el que necesitemos según el Sistema Operativo, en mi caso utilizo Windows:

Ahora, en Windows me ha impedido instalarlo, pulsamos en que es seguro y que nos deje ejecutar.

Empezará a instalar:

Ahora nos pedirá autenticarnos con nuestra cuenta Google, elegimos una y listo:

Una vez instalado, vamos a nuestro proyecto y usamos el siguiente comando:

dart pub global activate flutterfire_cli

Esperamos a que se configure.

Nos aparecerá un Warning como este:

Tendremos que añadir este Path que indica, en el caso de Windows, de la siguiente forma:

Abre el Menú de Inicio:

• Haz clic en el botón de inicio de Windows en la esquina inferior izquierda de tu pantalla.

Configuración del Sistema:

• Escribe «Variables de entorno» y selecciona Editar las variables de entorno del sistema

Variables de entorno:

• En la ventana que se abre, buscamos la opción de «Variables de entorno…»

Editar la Variable PATH:

• En la sección «Variables del sistema», busca la variable llamada «Path» y haz clic en «Editar».

Agregar la Ruta:

• Buscamos la variable de sistema llamada Path:

• Pulsamos en editar y añadimos la nueva:

• C:\Users\user\AppData\Local\Pub\Cache\bin (que aparece en el Warning que te muestra en pantalla). Cambia user por tu nombre de usuario.

Guardar y Cerrar:

• Haz clic en «Aceptar» para cerrar la ventana de edición y luego en «Aceptar» nuevamente para cerrar la ventana de «Propiedades del sistema».

Cerrar y Abrir Terminales Nuevamente:

• Cierra cualquier terminal que estés utilizando y ábrela nuevamente para que los cambios surtan efecto.
• También es importante reiniciar la máquina para que se establezca la configuración.

En MAC:

Instalamos Firebase Tools:

npm install -g firebase-tools

Instalmos FlutterFire CLI

dart pub global activate flutterfire_cli

Y ahora configuramos la variable de entorno:

export PATH="$PATH":"$HOME/.pub-cache/bin"

Para dejarla siempre fija, editamos .zshrc:

 vi ~/.zshrc

Y añadimos la línea al final:

export PATH="$PATH":"$HOME/.pub-cache/bin"

Finalmente aplicamos la configuración:

source ~/.zshrc

Ahora añadimos firebase_core (https://pub.dev/packages/firebase_core)

flutter pub add firebase_core

Ahora hacemos login en FireBase:

firebase login

Y ahora usamos el comando para configurar el proyecto:

flutterfire configure

Si nos aparece el siguiente error:

FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command.
COMMAND: firebase --version
ERROR: The FlutterFire CLI currently requires the official Firebase CLI to also be installed, see https://firebase.google.com/docs/cli#install_the_firebase_cli for how to install it.

Instalamos lo siguiente:

npm install -g firebase-tools

*Recuerda tener nodejs instalado: https://nodejs.org/en

Si da este error

Exception: /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require': cannot load such file -- xcodeproj (LoadError)
        from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
        from -e:1:in `<main>'

Instalar:

sudo gem install xcodeproj

Y ya empezará a configurarse:

Ahora, seleccionamos el proyecto que hemos creado anteriormente.

Elegimos las plataformas que nos interesen:

En mi caso las dejo por defecto.

Y esperamos a que se configure.

Ahora vamos con el código que hará que las notificaciones funcionen.

Creamos una clase llamada FirebaseInitializer.dart

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

class FirebaseInitializer {
  static Future<void> initialize() async {
    try {
      await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform,
      );
      print('Firebase initialized successfully');
    } catch (e) {
      print('Error initializing Firebase: $e');
    }
  }
}

Una vez creada, tenemos que ir a nuestra clase principal y añadimos:

void main() async {
   await FirebaseInitializer.initialize();
}

Con esto se inicializa Firebase en nuestra APP.

isMa

Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.