Firebase setup for Flutter - Mini App: Build & Ship

Build: Firebase Initialization Screen

This screen initializes Firebase when the app starts and shows a simple message once Firebase is ready.

Target UI

-------------------------
| Firebase Init Screen   |
|                       |
| [Initializing...]      |
|                       |
|                       |
-------------------------

Add Firebase core package to the project

Initialize Firebase asynchronously when the app starts

Show 'Initializing...' text while Firebase is loading

Show 'Firebase Initialized!' text after successful initialization

Handle and show error message if Firebase fails to initialize

Starter Code

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: FirebaseInitScreen(),
    );
  }
}

class FirebaseInitScreen extends StatefulWidget {
  const FirebaseInitScreen({super.key});

  @override
  State<FirebaseInitScreen> createState() => _FirebaseInitScreenState();
}

class _FirebaseInitScreenState extends State<FirebaseInitScreen> {
  // TODO: Add Firebase initialization logic here

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Firebase Init Screen')),
      body: const Center(
        child: Text('Initializing...'),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: FirebaseInitScreen(),
    );
  }
}

class FirebaseInitScreen extends StatefulWidget {
  const FirebaseInitScreen({super.key});

  @override
  State<FirebaseInitScreen> createState() => _FirebaseInitScreenState();
}

class _FirebaseInitScreenState extends State<FirebaseInitScreen> {
  late Future<FirebaseApp> _firebaseInitialization;
  String _statusMessage = 'Initializing...';

  @override
  void initState() {
    super.initState();
    _firebaseInitialization = Firebase.initializeApp();
    _firebaseInitialization.then((_) {
      setState(() {
        _statusMessage = 'Firebase Initialized!';
      });
    }).catchError((error) {
      setState(() {
        _statusMessage = 'Error initializing Firebase: $error';
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Firebase Init Screen')),
      body: Center(
        child: Text(_statusMessage),
      ),
    );
  }
}

We import the firebase_core package to access Firebase initialization.

In initState, we start initializing Firebase asynchronously with Firebase.initializeApp(). We store the future in _firebaseInitialization.

We use then and catchError on the future to update a state variable _statusMessage depending on success or failure.

The UI shows the current status message in the center of the screen.

This approach ensures the app waits for Firebase setup and informs the user about the progress or errors.

Final Result

Completed Screen

-------------------------
| Firebase Init Screen   |
|                       |
| Firebase Initialized!  |
|                       |
|                       |
-------------------------

When the app starts, the screen shows 'Initializing...'

After Firebase finishes initializing, the text changes to 'Firebase Initialized!'

If initialization fails, the text shows an error message

Stretch Goal

Add a retry button that appears if Firebase initialization fails, allowing the user to try initializing again.

💡 Hint

Use a button that calls the Firebase initialization function again and updates the state accordingly.