Configurar Google Firebase en proyecto Flutter

por
Tiempo de lectura: 4 minutos

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: 

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

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

flutter pub add firebase_core

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

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.

Post Views: 7

Deja un comentario