For Flutter web, configure Firebase and Firestore | Step by Step [2024]
Firebase and Flutter go hand in hand. Configuring Firebase with flutter android is pretty straightforward. But, the web, requires some extra things.
Being a noob in web development. I have been trying to configure it but couldn't find a clear and structured way to do this easily from one site. So, I have tried to put all the steps required to configure Firebase and Firestore for creating web apps with Flutter in a single document.
Firebase Console Settings
- Creating Web API Key for your web app.
Ensure that you have visited the Authentication page in your Firebase Console. What I mean to say is, open the Authentication section in your Firebase Console and just click “Get Started” if you have not clicked yet.
This step is required to create a Web API Key for your app which will be required in further steps. I am not setting up any authentication in the app, click get started just to create this web API key, this key will appear in your project settings page in Firebase Console.
2. First, we will try to add a web app (just like Android/IOS) to our Firebase console.
Open the Firebase console for your App and navigate to the Project Overview section.
Select “+ Add App” and then select web (</>).
Refer to the below image.
Now, write your app’s name and then select register. After that, the “Add Firebase SDK” step will appear. This step says to copy your app's configuration to your web script. Click “Use a <script> tag”. Here, a script will appear.
Copy the script and click “Continue to Console”.
Now, your app is registered as a Web app in Firebase. Firebase Console side configuration is finished!!
Flutter Application Side Configuration
- Enabling the web for your Flutter app
Ensure that the web is enabled in your app. If not, run the below command in your terminal (command prompt) inside your application’s folder to turn on web development for your App.
…\my_app_folder> flutter config — enable-web
Now, a folder named “web” can be seen in your folder structure.
2. Adding firebase packages in pubspec.yaml
Add these packages to your pubspec.yaml file.
firebase_core: ^1.10.0
firebase_analytics: ^9.0.5
cloud_firestore: ^3.1.0
Here, the versions are the latest at the time of writing this. You can go to pub.dev to find the latest version.
3. Adding Firebase and Firestore Config for Web
Now, we will add the configurations for Firebase and Firestore for your Flutter Web app. This is the step that was referred to above.
Open the web folder of your app, then open the index.html file inside it. Paste the HTML script inside the <body> tag. The same script which we copied earlier in the 2nd step in the Firebase Console configuration.
Till now, the script contains configuration for Firebase and Analytics. It does not contain the Firestore configuration. For adding the Firestore configuration, add the below line along with the other import lines in the script just copied.
import { getFirestore } from “https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js";
Here, I have used the latest version available at the time of writing this. You can visit the link for the latest versions and if you want to add more things too: https://firebase.google.com/docs/web/setup#available-libraries
Further, add this line below getAnalytics(app); line.
const db = getFirestore(app);
This file is complete. Save it!
From the index.html file, in the above step, copy the lines given below. These lines will contain the values for your App already.
apiKey: “<api-key>”,
authDomain: “<auth-domain>”,
projectId: “<project-id>”,
storageBucket: “<storage-bucket>”,
messagingSenderId: “<messaging-sender-id>”,
appId: “<app-id>”,
measurementId: “<measurement-id>”
Now, paste these lines in your main.dart file as below:
void main() async {
….
await Firebase.initializeApp(
options: const FirebaseOptions(
apiKey: “<api-key>”,
authDomain: “<auth-domain>”,
projectId: “<project-id>”,
storageBucket: “<storage-bucket>”,
messagingSenderId: “<messaging-sender-id>”,
appId: “<app-id>”,
measurementId: “<measurement-id>”));
….
runApp(const MyApp());
}
Now, you can write your code as you write for your Flutter Apps and run it. All the codes will work the same as it works in your Android app.
Thank you!
