Firebase setup for Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Firebase core package in Flutter.

Flutter

import '[1]';

Drag options to blanks, or click blank then click option'

Apackage:flutter/material.dart

Bpackage:firebase_auth/firebase_auth.dart

Cpackage:flutter/widgets.dart

Dpackage:firebase_core/firebase_core.dart

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong Firebase package like firebase_auth instead of firebase_core.

Importing only Flutter material package without Firebase.

You need to import 'package:firebase_core/firebase_core.dart' to initialize Firebase in Flutter.

2fill in blank

medium

Complete the code to initialize Firebase asynchronously in the main function.

Flutter

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await [1]();
  runApp(MyApp());
}

Drag options to blanks, or click blank then click option'

ArunApp

BFirebase.initializeApp

CWidgetsFlutterBinding.ensureInitialized

DFirebaseAuth.instance

Attempts:

3 left

💡 Hint

Common Mistakes

Calling runApp() before Firebase initialization.

Forgetting to mark main() as async.

Firebase.initializeApp() initializes Firebase asynchronously before running the app.

3fill in blank

hard

Fix the error in the code to ensure Firebase initializes before the app runs.

Flutter

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  [1];
  runApp(MyApp());
}

Drag options to blanks, or click blank then click option'

Aawait Firebase.initializeApp()

BFirebase.initializeApp()

CFirebase.initializeApp

DFirebaseAuth.instance

Attempts:

3 left

💡 Hint

Common Mistakes

Not marking main() as async when awaiting.

Calling initializeApp without parentheses.

You must await Firebase.initializeApp() inside an async main function to initialize Firebase properly.

4fill in blank

hard

Fill both blanks to import Firebase Auth and create an instance.

Flutter

import '[1]';

final auth = [2];

Drag options to blanks, or click blank then click option'

Apackage:firebase_auth/firebase_auth.dart

BFirebaseAuth.instance

Cpackage:firebase_core/firebase_core.dart

DFirebase.instance

Attempts:

3 left

💡 Hint

Common Mistakes

Importing firebase_core instead of firebase_auth for authentication.

Using Firebase.instance which does not exist.

You import firebase_auth package and create an instance using FirebaseAuth.instance.

5fill in blank

hard

Fill all three blanks to add Firebase initialization in a Flutter widget.

Flutter

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: [1](),
      builder: (context, snapshot) {
        if (snapshot.connectionState == [2]) {
          return [3];
        }
        return CircularProgressIndicator();
      },
    );
  }
}

Drag options to blanks, or click blank then click option'

AFirebase.initializeApp

BConnectionState.done

CMaterialApp(home: HomeScreen())

DWidgetsFlutterBinding.ensureInitialized

Attempts:

3 left

💡 Hint

Common Mistakes

Not using FutureBuilder to wait for Firebase initialization.

Checking wrong connection state.

Returning widget before Firebase is ready.

Use Firebase.initializeApp() as future, check for ConnectionState.done, then show MaterialApp with home screen.

Practice

1. What is the first step to connect your Flutter app to Firebase?

easy

A. Add Firebase dependencies after running the app

B. Write Flutter UI code

C. Create a Firebase project in the Firebase console

D. Run the app without any setup

Solution

1. Step 1: Access Firebase Console

   You must first create a Firebase project in the Firebase console to get started.

2. Step 2: Prepare for Flutter integration

   After creating the project, you can download config files and add dependencies.

3. Final Answer:

   Create a Firebase project in the Firebase console -> Option C

4. Quick Check:

   First step = Create Firebase project [OK]

Hint: Start by creating a Firebase project online [OK]

Common Mistakes:

• Skipping Firebase project creation
• Trying to run app before setup
• Adding dependencies too late

2. Which file must be added to your Flutter Android app after creating a Firebase project?

easy

A. google-services.json

B. GoogleService-Info.plist

C. firebase-config.xml

D. firebase-settings.json

Solution

1. Step 1: Identify Android config file

   For Android apps, Firebase requires the google-services.json file.

2. Step 2: Add file to Android app folder

   This file must be placed in the android/app directory of your Flutter project.

3. Final Answer:

   google-services.json -> Option A

4. Quick Check:

   Android config file = google-services.json [OK]

Hint: Android uses google-services.json config file [OK]

Common Mistakes:

• Using iOS plist file for Android
• Misnaming the config file
• Placing file in wrong folder

3. What will happen if you forget to call Firebase.initializeApp() before runApp() in Flutter?

medium

A. App runs normally without Firebase

B. App crashes on build time

C. Firebase features work partially

D. App throws an error at runtime

Solution

1. Step 1: Understand Firebase initialization

   Firebase must be initialized before the app runs to set up services properly.

2. Step 2: Consequence of missing initialization

   If Firebase.initializeApp() is not called first, the app will throw a runtime error when Firebase is accessed.

3. Final Answer:

   App throws an error at runtime -> Option D

4. Quick Check:

   Missing initializeApp() = runtime error [OK]

Hint: Always initialize Firebase before runApp() [OK]

Common Mistakes:

• Calling initializeApp() after runApp()
• Assuming app runs without initialization
• Ignoring runtime errors

4. You added google-services.json but forgot to add the Firebase plugin in build.gradle. What is the likely result?

medium

A. Firebase services work fine anyway

B. Build fails with plugin not found error

C. App runs but Firebase features are disabled

D. App crashes only on iOS devices

Solution

1. Step 1: Role of Firebase plugin in build.gradle

   The Firebase plugin is required to process the config file and link Firebase SDK during build.

2. Step 2: Effect of missing plugin

   Without the plugin, the build system cannot find Firebase tasks, causing a build failure.

3. Final Answer:

   Build fails with plugin not found error -> Option B

4. Quick Check:

   Missing plugin = build failure [OK]

Hint: Add Firebase plugin in build.gradle to avoid build errors [OK]

Common Mistakes:

• Only adding config file without plugin
• Ignoring build errors
• Assuming plugin is optional

5. You want to support both Android and iOS in your Flutter app with Firebase. Which steps are required?

hard

A. Add google-services.json for Android and GoogleService-Info.plist for iOS, then initialize Firebase in main

B. Add only google-services.json and initialize Firebase in main

C. Add only GoogleService-Info.plist and initialize Firebase in main

D. Initialize Firebase in main without adding any config files

Solution

1. Step 1: Add platform-specific config files

   Android requires google-services.json and iOS requires GoogleService-Info.plist to connect to Firebase.

2. Step 2: Initialize Firebase in main function

   Call Firebase.initializeApp() before runApp() to set up Firebase services.

3. Final Answer:

   Add google-services.json for Android and GoogleService-Info.plist for iOS, then initialize Firebase in main -> Option A

4. Quick Check:

   Both config files + initialize = correct setup [OK]

Hint: Add both config files and initialize Firebase before runApp() [OK]

Common Mistakes:

• Adding only one platform's config file
• Forgetting to initialize Firebase
• Assuming config files auto-load