Learn Firestore | Firebase Integration

Cloud Firestore is a NoSQL cloud database from Firebase that lets you store, sync, and query data for your Flutter apps in real time. Firestore organizes data using a flexible, scalable document/collection model. Data is stored as documents, which are grouped into collections. Each document contains a set of key-value pairs and can also reference subcollections, allowing you to represent complex, hierarchical data structures. This model makes it easy to structure user profiles, chat messages, or any structured data that your app requires.

main.dart


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

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

class FirestoreDemoApp extends StatelessWidget {
  const FirestoreDemoApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firestore Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Firestore Demo')),
        body: const FirestoreDemoWidget(),
      ),
    );
  }
}

class FirestoreDemoWidget extends StatefulWidget {
  const FirestoreDemoWidget({Key? key}) : super(key: key);

  @override
  State<FirestoreDemoWidget> createState() => _FirestoreDemoWidgetState();
}

class _FirestoreDemoWidgetState extends State<FirestoreDemoWidget> {
  final CollectionReference users = FirebaseFirestore.instance.collection('users');
  final TextEditingController _nameController = TextEditingController();

  Future<void> _addUser(String name) async {
    await users.add({'name': name, 'createdAt': FieldValue.serverTimestamp()});
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              Expanded(
                child: TextField(
                  controller: _nameController,
                  decoration: const InputDecoration(labelText: 'Enter name'),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  final name = _nameController.text.trim();
                  if (name.isNotEmpty) {
                    _addUser(name);
                    _nameController.clear();
                  }
                },
                child: const Text('Add User'),
              ),
            ],
          ),
        ),
        Expanded(
          child: StreamBuilder<QuerySnapshot>(
            stream: users.orderBy('createdAt', descending: true).snapshots(),
            builder: (context, snapshot) {
              if (snapshot.hasError) {
                return const Center(child: Text('Error loading users'));
              }
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const Center(child: CircularProgressIndicator());
              }
              final docs = snapshot.data?.docs ?? [];
              return ListView.builder(
                itemCount: docs.length,
                itemBuilder: (context, index) {
                  final data = docs[index].data() as Map<String, dynamic>;
                  return ListTile(
                    title: Text(data['name'] ?? 'No name'),
                  );
                },
              );
            },
          ),
        ),
      ],
    );
  }
}

Firestore's real-time capabilities allow your Flutter app to automatically update the user interface whenever data changes in the database. When you use snapshot listeners, such as the StreamBuilder with the snapshots() method in the example, your app listens for changes in the Firestore collection. Any addition, modification, or deletion of documents in the collection is instantly reflected in your app, without requiring a manual refresh. This makes Firestore ideal for collaborative, dynamic applications where you want users to see updates as soon as they happen.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 2

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain how to set up Firestore in a Flutter project?

How do I use snapshot listeners in my Flutter app?

What are some common use cases for Firestore's real-time features?

Swipe to show menu

main.dart


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

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

class FirestoreDemoApp extends StatelessWidget {
  const FirestoreDemoApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firestore Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Firestore Demo')),
        body: const FirestoreDemoWidget(),
      ),
    );
  }
}

class FirestoreDemoWidget extends StatefulWidget {
  const FirestoreDemoWidget({Key? key}) : super(key: key);

  @override
  State<FirestoreDemoWidget> createState() => _FirestoreDemoWidgetState();
}

class _FirestoreDemoWidgetState extends State<FirestoreDemoWidget> {
  final CollectionReference users = FirebaseFirestore.instance.collection('users');
  final TextEditingController _nameController = TextEditingController();

  Future<void> _addUser(String name) async {
    await users.add({'name': name, 'createdAt': FieldValue.serverTimestamp()});
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              Expanded(
                child: TextField(
                  controller: _nameController,
                  decoration: const InputDecoration(labelText: 'Enter name'),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  final name = _nameController.text.trim();
                  if (name.isNotEmpty) {
                    _addUser(name);
                    _nameController.clear();
                  }
                },
                child: const Text('Add User'),
              ),
            ],
          ),
        ),
        Expanded(
          child: StreamBuilder<QuerySnapshot>(
            stream: users.orderBy('createdAt', descending: true).snapshots(),
            builder: (context, snapshot) {
              if (snapshot.hasError) {
                return const Center(child: Text('Error loading users'));
              }
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const Center(child: CircularProgressIndicator());
              }
              final docs = snapshot.data?.docs ?? [];
              return ListView.builder(
                itemCount: docs.length,
                itemBuilder: (context, index) {
                  final data = docs[index].data() as Map<String, dynamic>;
                  return ListTile(
                    title: Text(data['name'] ?? 'No name'),
                  );
                },
              );
            },
          ),
        ),
      ],
    );
  }
}

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 2