Today we are going to learn how we can set up Google Firebase in a Flutter project.
The first thing we need to do is create our Firebase project, for that we go to https://firebase.google.com/
And click on Go to Console:
Choose Add Project
Choose a name for the APP. We can choose whether we want to activate Google Analytics.
Wait for the project to be set up and click continue:
Now we install Firebase CLI: https://firebase.google.com/docs/cli?hl=es-419#setup_update_cli
We download the one we need according to the Operating System, in my case I use Windows:
Now, in Windows it has prevented me from installing it, we click that it is safe and let it run.
It will start installing:
Now it will ask us to authenticate with our Google account, we choose one and we’re done:
Once installed, we go to our project and use the following command:
dart pub global activate flutterfire_cli
We wait for it to configure.
We will see a Warning like this:
We have to add this Path it indicates, in the case of Windows, as follows:
Open the Start Menu:
- Click on the Windows start button in the lower-left corner of your screen.
System Configuration:
- Type “Environment Variables” and select Edit the system environment variables
Environment Variables:
- In the window that opens, look for the option of “Environment Variables…”
Edit the PATH Variable:
- In the “System Variables” section, look for the variable called “Path” and click on “Edit”.
Add the Path:
- We look for the system variable called Path:
- We click on edit and add the new one:
C:\Users\user\AppData\Local\Pub\Cache\bin(which appears in the Warning that is shown on your screen). Change user with your username.
Save and Close:
- Click on “OK” to close the editing window and then on “OK” again to close the “System Properties” window.
Close and Open Terminals Again:
- Close any terminal you are using and open it again for the changes to take effect.
- It’s also important to restart the machine for the settings to take effect.
On MAC:
export PATH="$PATH":"$HOME/.pub-cache/bin"
Now we add firebase_core (https://pub.dev/packages/firebase_core)
flutter pub add firebase_core
And now we use the command to configure the project:
flutterfire configure
If we encounter the following 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.
We install the following:
npm install -g firebase-tools
*Remember to have nodejs installed: https://nodejs.org/en
And it will start configuring:
Now, we select the project we created earlier.
We choose the platforms that interest us:
<
div class=”wp-block-image”>
In my case, I leave them as default.
And we wait for it to be configured.
Now, let’s move on to the code that will make the notifications work.
We create a class called 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');
}
}
}
Once created, we have to go to our main class and add:
void main() async {
await FirebaseInitializer.initialize();
}
This initializes Firebase in our app.
Si nos aparece el siguiente error:
FirebaseCommandException: Se produjo un error en la CLI de Firebase al intentar ejecutar un comando. COMANDO: firebase --version ERROR: La CLI de FlutterFire actualmente requiere que también esté instalada la CLI oficial de Firebase, consulta https://firebase.google.com/docs/cli#install_the_firebase_cli para obtener instrucciones sobre cómo instalarla.
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.
If we encounter the following error:
FirebaseCommandException: An error occurred 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.
We install the following:
npm install -g firebase-tools
*Remember to have Node.js installed: https://nodejs.org/en
And it will start setting up:
Now, we select the project we created earlier.
We choose the platforms that interest us:
In my case, I leave them as default.
And we wait for it to be configured.
Now, let’s move on to the code that will make the notifications work.
We create a class called 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');
}
}
}
Once created, we have to go to our main class and add:
void main() async {
await FirebaseInitializer.initialize();
}
With this, Firebase is initialized in our app.
“`
