Flutter es una tecnología de Google que está en constante desarrollo. El gigante de Internet le está invirtiendo mucho esfuerzo a Flutter y la apuesta es por convertirlo en el Framework definitivo para cualquier plataforma (escritorio, móvil y web). Firebase por otro lado es un backend NO-SQL, funcionan de maravilla juntos, pero hasta hace poco era un poco tedioso conectarlos. Pero eso se acabó con la aparición de FlutterFire.
En este vídeo muestro como realizar la implementación de FlutterFire de forma visual por si prefieres ver en lugar de leer. También puedes suscribirte al canal de Youtube que es completamente gratis.
Para los que siguen mis artículos o canal de youtube saben que soy fan declarado de Flutter y su forma de trabajo. Y si me conoces en persona saber que soy amante de Firebase y su rapidez de respuesta. Sabiendo esto puede imaginarte el orgasmo que me ocasiona hablar de FlutterFire. Además me ahorra mucho tiempo ya que mis desarrollos suelen ser con estas plataformas.
Pero bien, ¿cómo funciona esto?
FlutterFire es una función de Firebase CLI (Interface de línea de comandos) que te permite configurar una aplicación de Flutter de manera que quede listo para comenzar a usar los servicios de Firebase. Crea la App para Android, iOS y Web en el proyecto de Firebase que escoges y crea la configuración para que solo necesites inicializar la app en el código de Flutter.
Voy a explicar cómo utilizar FlutterFire para configurar la aplicación de Flutter y vincularla con tu proyecto de Firebase. Iremos paso a paso, aunque no son muchos, hay que respetarlos. También te enseñaré qué paquetes debes tener instalados para que funcione. ¿Comenzamos?
Paquetes necesarios para usar FlutterFire
Esta funcionalidad es propia de Firebase CLI, así que es importante que lo tengas instalado. Pero, si eres nuevo en esto debo recordarte que para que este paquete funcione bien debes tener instalado Node JS. Así que empecemos por aquí.
Node JS: Este es un paquete indispensable en el computador de cualquier desarrollador. Permite instalar una gran cantidad de aplicaciones y funcionalidades de todo tipo. Puedes bajarlo desde su sitio web oficial. Es completamente gratis. Recomiendo que descargues la versión LTS ya que tiene mejor soporte.
Firebase CLI: Este es un paquete que te permite usar y configurar algunas funciones de tus proyecto de Firebase desde la consola de tu computador usando comandos como los que usarías para gestionar tu configuración local. Aunque son muy pocas personas las que usan la línea de comando para esos. Para instalarlo debes ejecutar en tu consola:
npm install -g firebase-tools
Recuerda que debes tener instalado Node JS para que esto funcione. NPM es el gestor de paquetes de Node Js. La bandera -g le dice al instalador que debe ser instalado de forma global en tu computador. Así que si estás trabajando en MAC o en Linux tienes que colocar el comando sudo antes del comando. Te pedirá la contraseña y listo.
Flutter SDK: Esto puede sonar obvio, pero hay que procurar ser detallista. Para poder usar esta funcionalidad debes tener instalado el SDK de Flutter en tu computador, de manera de poder crear aplicaciones de Flutter. Al momento de estar escribiendo este artículo está vigente la versión 2.8 de Flutter. Recomiendo siempre tenerlo actualizado para poder usar todas las características.
Conectemos Firebase CLI
Muy bien, ya tenemos instalado todo lo que necesitamos, el siguiente paso es iniciar sesión con nuestra cuenta de Firebase. Para tener una cuenta de firebase solo necesitas un correo electrónico de GMail, si cuentas con uno, tener tu cuenta de Firebase es completamente gratis. Puedes ir a Firebase para iniciar sesión. Pero si tienes dudas puedes ver este vídeo donde lo explico más a detalle:
Una vez que tenemos nuestro proyecto de Firebase creado, tenemos que decirle a nuestro computador que cuenta de Firebase debe usar el Firebase CLI. Para hacer esto es sencillo, solo debemos iniciar sesión desde el Firebase CLI. Para ello abrimos una consola y escribimos:
firebase login
Una vez que hayamos ejecutado este comando deberá abrirse una ventana de nuestro navegador y nos pedirá iniciar sesión, pones tus datos o eliges tu usuario y listo. Ya con eso Firebase CLI sabrá que tu correo es el que debe usar para conectarse a un proyecto.
Desde ahora podremos configurar los proyectos desde la consola de nuestra computadora, para asegurarnos de que todo ha ido bien puedes correr el comando firebase projects:list que debe mostrarte una lista de los proyectos que tienes en tu consola de Firebase.
Ahora vamos a nuestro proyecto de Flutter
Ya tenemos nuestro Firebase CLI funcionando y configurado. Ahora vamos con Flutter, no es tan complicado, solo debemos tener creado nuestro proyecto y con un identificador correcto. Vamos a ver como hacerlo.
Si ya tienes tu proyecto creado tendrás que ir al archivo se encuentra en la carpeta de Android/app/build.gradle donde encontraras un valor llamado: applicationId ese es tu identificador único de aplicación. Si no lo has asignado puede hacerlo ahí mismo. Normalmente se usa un sintaxis com.codigocorrecto.nameapp, digamos que es un subdominio escrito a la inversa.
Si no has creado tu proyecto aun, será mucho más sencillo. Solo debes crear tu proyecto asignando el identificador único desde el principio. Para ello puedes crear el proyecto usando el comando de Flutter. Puedes ubicarse en la carpeta donde quieres crear el proyecto de Flutter y navegar hasta ahí con la consola. Luego escribir el comando:
flutter create --org com.codigocorrecto nameapp
El identificador quedará como com.codigocorrecto.nameapp por supuesto recuerda usar tu información, código correcto es mi dominio y por tanto estoy seguro que nadie usará ese identificador, lo ideal es que utilices tu propia información para construir el identificador de tus aplicaciones.
Conectemos Flutter con Firebase
Lo que hemos visto hasta ahora era para aquellas personas que nunca han trabajado con Firebase o con Flutter. De aquí en adelante asumiremos que ya sabemos lo que estamos haciendo. El procedimiento de aquí en adelante es el objetivo de este artículo para ser más claros.
1. Instalamos el paquete de pub de firebase core: Este es el primer paso, necesitamos el core de Firebase en nuestro proyecto de Flutter. Para hacerlo solo debe ejecutar el siguiente comando dentro del proyecto:
flutter pub add firebase_core
2. El segundo paso es activar FlutterFire en nuestra aplicación: Es una manera de conectar Flutter y el Firebase CLI de nuestro computador. Para hacer esto solo debemos ejecutar el siguiente comando:
dart pub global activate flutterfire_cli
Es posible (dependiendo de tu computador) que sea necesario declara una variable de entorno para permitir el acceso. Es tan sencillo como abrir Variables de Entorno en Windows y agregar de forma global la que te sugiere Flutter. En caso de estar en Linux o Mac tendrás que agregarla a el archivo de bash que corresponda.
3. Generar la configuración: El siguiente paso es generar nuestro archivo de configuración. Para hacerlo solo debes ejecutar el siguiente comando:
flutterfire configure
Cuando lo ejecutes te preguntará qué proyecto de Firebase quieres vincular. Con es información creará todo lo necesario para que funcione correctamente, las aplicaciones para Android, iOS y Web en el proyecto de Firebase, los archivos json, instalará las dependencias en el build.gradle, etc. Todo listo para comenzar a usar los servicios de Firebase en Flutter.
4. Inicializar nuestra app: Este es un paso que se debe hacer independientemente del método que uses para conectar Firebase a Flutter. Consiste en arrancar la aplicación de Firebase antes de comenzar la aplicación de flutter, así cuando este quiere consultar la configuración ya todo estará funcionando y no tendremos problemas de funciones no encontradas o cosas así.
Para hacerlo podemos ejecutar el siguiente código en el archivo main.dart de nuestra aplicación. Es lo primero que se debe ejecutar y el primer widget solo se llamará cuando la inicialización de Firebase se haya completado.
import 'package:firebase_core/firebase_core.dart';
// Importamos la configuarcion creada por FlutterFire
import 'firebase_options.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(MyApp());
}
El siguiente paso es correr nuestra aplicación y cruzar los dedos. Si todo sale bien ya estará listo el proceso. Ahora solo tendremos que instalar el paquete de cada servicio de Firebase que queramos usar: Firestore, FirebaseAuth, FirebaseMessaging, etc.
Espero que este artículo te haya gustado, pero sobre todo espero que te haya servido. En abrazo y hasta la próxima.