Firebase project and Firestore

In the next chapters we will build one bigger app step by step: Travel Notes.

Travel Notes is a small app where users can keep personal travel plans. A user can create trips, add a destination, write notes, add tags and keep a checklist. This is a good example for Firebase:

• the data belongs to a specific user, so authentication is needed
• the app reads and writes small documents
• a trip can contain flexible fields, such as tags and checklist items
• the UI can update in realtime when Firestore data changes

In this chapter we will create the Flutter app, create a Firebase project and connect Cloud Firestore. In the next chapter we will add Firebase Authentication.

Create the Flutter app

• Create a new Flutter application with name travel_notes_app.
• Create the following directories in the lib folder:
  • models
  • pages
  • repositories
  • services
• Delete widget_test.dart in the test folder.

Create a Firebase project

• Go to Firebase and sign in with a Google account.
• Open the Firebase console.
• Click Create a project.
• Give the project a clear name, for example travel-notes.
• Google Analytics is not required for this course, so you can disable it.

Enable Cloud Firestore

• In the Firebase console, open your project.
• Go to Product Categories > Databases & Storage > NoSQL > Firestore.
• Click Create database.
• Choose Standard edition.
• Choose the closest region.
• Choose Start in test mode while developing.
• Create the database.

Firestore rules

Test mode is useful while learning, but it allows broad access for a limited time. Never ship a real app with open test rules. Later in this course we will write security rules so users can only access their own trips.

Why NoSQL fits this app

Firestore is a NoSQL document database. That means you do not work with tables and rows like in a relational SQL database.

SQL database	Firestore
table	collection
row	document
column	field
primary key	document id
relation	reference, duplicate data, or subcollection

Travel Notes is document-oriented. A trip can be stored as one document:

users
  userUid
    trips
      tripId
        title: "Summer in Japan"
        destination: "Tokyo"
        description: "Food, temples and game arcades"
        tags: ["city", "food", "culture"]
        checklist: ["Passport", "JR Pass", "Camera"]
        createdAt: timestamp

This shows some advantages of a NoSQL database:

• A trip is read as one complete document.
• Lists such as tags and checklist can be stored inside the document.
• New fields can be added later without changing a fixed table schema.
• Trips are stored under the logged-in user, which makes security rules easier.
• Firestore can stream changes to Flutter, so lists update automatically.

Structure

We will store trips under users/{uid}/trips. The uid comes from Firebase Authentication. That is why the next chapter adds login and registration before we start showing trips from Firestore.

Configure Firebase in Flutter

Firebase is added to Flutter projects with the FlutterFire CLI.

Install the command line tools

Install the Firebase CLI:

npm install -g firebase-tools

Log in:

firebase login

Install the FlutterFire CLI:

dart pub global activate flutterfire_cli

PATH

If the flutterfire command is not found, add Dart's global package folder to your PATH. Flutter will usually print the right folder after installing the CLI.

Configure your Flutter project

Open a terminal in the root folder of travel_notes_app and run:

flutterfire configure

Select the Firebase project you created and select the Android, Web and Windows platforms.

This command creates lib/firebase_options.dart. This file contains the Firebase configuration for your app.

Re-run when needed

Run flutterfire configure again when you add another platform to your Flutter app or when you create a new Firebase project.

Add the packages

Add the Firebase packages to pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^4.9.0
  cloud_firestore: ^6.4.1
  firebase_auth: ^6.5.1

Or install them with:

flutter pub add firebase_core cloud_firestore firebase_auth

Initialize Firebase

Replace the content of lib/main.dart with the following code:

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:travel_notes_app/pages/setup.dart';

import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const TravelNotesApp());
}

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

  @override
  Widget build(BuildContext context) {
    final ColorScheme colors = ColorScheme.fromSeed(
      seedColor: Colors.teal,
    );

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Travel Notes',
      theme: ThemeData(
        colorScheme: colors,
        appBarTheme: AppBarTheme(
          backgroundColor: colors.primary,
          foregroundColor: colors.onPrimary,
        ),
      ),
      home: const SetupPage(),
    );
  }
}

Create setup.dart in the pages folder:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text("Firebase is ready"),
      ),
    );
  }
}

code	description
import 'package:travel_notes_app/pages/setup.dart';	imports the page widget from the pages folder
WidgetsFlutterBinding.ensureInitialized()	makes sure Flutter is ready before we use plugins
Firebase.initializeApp(...)	connects the app with your Firebase project
DefaultFirebaseOptions.currentPlatform	uses the right generated configuration for Android, iOS, Web, ...
ColorScheme.fromSeed(seedColor: Colors.teal)	creates the app color scheme
appBarTheme	makes app bars use the primary color from the theme
home: const SetupPage()	shows the setup page when the app starts

Run the app. If you see Firebase is ready, the Flutter app is connected to Firebase.