Firebase with Flutter - Mini Project: Build & Apply

Firebase with Flutter

📖 Scenario: You are building a simple Flutter app that connects to Firebase to store and retrieve user messages. This app will help you understand how to set up Firebase in Flutter and perform basic database operations.

🎯 Goal: Create a Flutter app that connects to Firebase, initializes Firebase, and writes and reads a simple message from Firestore.

📋 What You'll Learn

Initialize Firebase in the Flutter app

Create a Firestore instance

Write a message to Firestore

Read the message from Firestore

💡 Why This Matters

🌍 Real World

Many mobile apps use Firebase to store and sync data in real time. This project shows the basic setup to connect Flutter apps to Firebase Firestore.

💼 Career

Understanding Firebase integration with Flutter is valuable for mobile developers building cloud-connected apps.

1

Setup Firebase Initialization

In your Flutter app's main.dart file, import firebase_core package and initialize Firebase inside the main() function by calling WidgetsFlutterBinding.ensureInitialized() and await Firebase.initializeApp(). Create a Future main() function that does this initialization.

Firebase

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

// Initialize Firebase in main function
Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Your code here
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('Firebase with Flutter')),
      ),
    );
  }
}

Need a hint?

Remember to import firebase_core and call WidgetsFlutterBinding.ensureInitialized() before initializing Firebase.

2

Create Firestore Instance

Import cloud_firestore package and create a variable called firestore that holds the instance of FirebaseFirestore.instance.

Firebase

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

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

// Create Firestore instance here
final FirebaseFirestore firestore = FirebaseFirestore.instance;

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('Firebase with Flutter')),
      ),
    );
  }
}

Need a hint?

Import cloud_firestore and create a final FirebaseFirestore firestore = FirebaseFirestore.instance; variable.

3

Write a Message to Firestore

Inside the MyApp widget, add a method called writeMessage() that uses firestore.collection('messages').doc('msg1').set({'text': 'Hello Firebase!'}) to write a message to Firestore.

Firebase

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

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

final FirebaseFirestore firestore = FirebaseFirestore.instance;

class MyApp extends StatelessWidget {
  Future writeMessage() async {
    // Your code here
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('Firebase with Flutter')),
      ),
    );
  }
}

Need a hint?

Use firestore.collection('messages').doc('msg1').set({'text': 'Hello Firebase!'}) inside an async method.

4

Read the Message from Firestore

Add a method called readMessage() inside MyApp that uses firestore.collection('messages').doc('msg1').get() to read the message document. Extract the 'text' field from the document snapshot and return it as a String.

Firebase

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

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

final FirebaseFirestore firestore = FirebaseFirestore.instance;

class MyApp extends StatelessWidget {
  Future writeMessage() async {
    await firestore.collection('messages').doc('msg1').set({'text': 'Hello Firebase!'});
  }

  Future readMessage() async {
    // Your code here
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('Firebase with Flutter')),
      ),
    );
  }
}

Need a hint?

Use await firestore.collection('messages').doc('msg1').get() and return the 'text' field.