Esta página foi traduzida pela API Cloud Translation.

Introdução ao Firebase para Flutter

1. Antes de começar

Neste codelab, você vai aprender alguns conceitos básicos do Firebase para criar apps móveis do Flutter para Android e iOS.

Pré-requisitos

O que você vai aprender

Como criar um app de confirmação de presença em eventos e chat de livro de visitas no Android, iOS, Web e macOS com o Flutter.
Como autenticar usuários com o Firebase Authentication e sincronizar dados com o Firestore.

Pré-requisitos

Qualquer um dos seguintes dispositivos:

Um dispositivo físico Android ou iOS conectado ao computador e configurado para o modo de desenvolvedor.
O simulador para iOS (requer ferramentas do Xcode).
O Android Emulator, que requer configuração no Android Studio.

Você também precisa de:

Um navegador de sua escolha, como o Google Chrome.
Um ambiente de desenvolvimento integrado ou editor de texto de sua preferência configurado com os plug-ins Dart e Flutter, como o Android Studio ou o Visual Studio Code (link em inglês).
A versão mais recente do stable do Flutter ou beta, se você gosta de viver na vanguarda.
Uma Conta do Google para a criação e o gerenciamento do seu projeto do Firebase.
A CLI Firebase fez login na sua Conta do Google.

2. Acessar o exemplo de código

Faça o download da versão inicial do seu projeto no GitHub:

Na linha de comando, clone o repositório do GitHub (link em inglês) no diretório flutter-codelabs:

git clone https://github.com/flutter/codelabs.git flutter-codelabs

O diretório flutter-codelabs contém o código de uma coleção de codelabs. O código para este codelab está no diretório flutter-codelabs/firebase-get-to-know-flutter. O diretório contém uma série de snapshots que mostram como seu projeto deve ficar ao final de cada etapa. Por exemplo, você está na segunda etapa.

Encontre os arquivos correspondentes para a segunda etapa:

cd flutter-codelabs/firebase-get-to-know-flutter/step_02

Se você quiser pular para a frente ou conferir como algo fica depois de uma etapa, procure no diretório com o nome da etapa em que você tem interesse.

Importar o app inicial

Abra ou importe o diretório flutter-codelabs/firebase-get-to-know-flutter/step_02 no ambiente de desenvolvimento integrado de sua preferência. O diretório contém o código inicial do codelab, que consiste em um app de reunião do Flutter ainda não funcional.

Localizar os arquivos que precisam de trabalho

O código deste app está distribuído em vários diretórios. Essa divisão de funcionalidade facilita o trabalho porque agrupa o código por funcionalidade.

Localize os seguintes arquivos:
- lib/main.dart: este arquivo contém o ponto de entrada principal e o widget do app.
- lib/home_page.dart: este arquivo contém o widget da página inicial.
- lib/src/widgets.dart: este arquivo contém alguns widgets para ajudar a padronizar o estilo do app. Eles compõem a tela do app inicial.
- lib/src/authentication.dart: este arquivo contém uma implementação parcial da Autenticação com um conjunto de widgets para criar uma experiência de login do usuário para a autenticação baseada em e-mail do Firebase. Esses widgets para o fluxo de autenticação ainda não são usados no app inicial, mas você vai adicioná-los em breve.

Você adiciona outros arquivos conforme necessário para criar o restante do app.

Revise o arquivo `lib/main.dart`

Esse app aproveita o pacote google_fonts para tornar a Roboto a fonte padrão em todo o app. Você pode conferir fonts.google.com e usar as fontes encontradas em diferentes partes do app.

Use os widgets auxiliares do arquivo lib/src/widgets.dart na forma de Header, Paragraph e IconAndDetail. Esses widgets eliminam o código duplicado para reduzir a poluição no layout da página descrito em HomePage. Isso também permite uma aparência consistente.

Confira como o app fica no Android, iOS, na Web e no macOS:

3. Criar e configurar um projeto do Firebase

A exibição das informações do evento é ótima para os convidados, mas não é muito útil por si só. Você precisa adicionar algumas funcionalidades dinâmicas ao app. Para isso, conecte o Firebase ao app. Para começar a usar o Firebase, crie e configure um projeto do Firebase.

Criar um projeto do Firebase

Faça login no Firebase.
No console, clique em Adicionar projeto ou Criar um projeto.
No campo Nome do projeto, insira Firebase-Flutter-Codelab e clique em Continuar.

Clique nas opções de criação do projeto. Se solicitado, aceite os termos do Firebase, mas ignore a configuração do Google Analytics porque você não vai usá-lo para este app.

Para saber mais sobre os projetos do Firebase, consulte Noções básicas sobre projetos do Firebase.

O app usa os seguintes produtos do Firebase, que estão disponíveis para apps da Web:

Autenticação:permite que os usuários façam login no seu app.
Firestore:salva dados estruturados na nuvem e recebe notificações instantâneas quando os dados são alterados.
Regras de segurança do Firebase:protegem seu banco de dados.

Alguns desses produtos necessitam de configuração especial ou precisam ser ativados no Console do Firebase.

No painel Visão geral do projeto do Console do Firebase, expanda o menu Build.
Clique em Autenticação > Começar > Método de login > E-mail/senha > Ativar > Salvar.

Configurar o Firestore

O app da Web usa o Firestore para salvar e receber novas mensagens de chat.

Confira como configurar o Firestore no seu projeto do Firebase:

No painel à esquerda do Console do Firebase, expanda Build e selecione Banco de dados do Firestore.
Clique em Criar banco de dados.
Deixe o ID do banco de dados definido como (default).
Selecione um local para o banco de dados e clique em Próxima.
No caso de apps reais, escolha um local próximo aos usuários.
Clique em Iniciar no modo de teste. Leia o aviso sobre as regras de segurança.
Mais adiante neste codelab, você vai adicionar regras de segurança para proteger seus dados. Não distribua ou exponha um aplicativo publicamente sem adicionar regras de segurança ao seu banco de dados.
Clique em Criar.

4. Configurar o Firebase

Para usar o Firebase com o Flutter, você precisa concluir as seguintes tarefas para configurar o projeto do Flutter para usar as bibliotecas FlutterFire corretamente:

Adicione as dependências FlutterFire ao seu projeto.
Registre a plataforma desejada no projeto do Firebase.
Faça o download do arquivo de configuração específico da plataforma e adicione-o ao código.

No diretório de nível superior do seu app do Flutter, há subdiretórios android, ios, macos e web, que contêm os arquivos de configuração específicos da plataforma para iOS e Android, respectivamente.

Configurar dependências

Você precisa adicionar as bibliotecas FlutterFire para os dois produtos do Firebase que você usa neste app: Authentication e Firestore.

Na linha de comando, adicione as seguintes dependências:

$ flutter pub add firebase_core

O pacote firebase_core é o código comum necessário para todos os plug-ins do Firebase Flutter.

$ flutter pub add firebase_auth

O pacote firebase_auth permite a integração com a autenticação.

$ flutter pub add cloud_firestore

O pacote cloud_firestore permite o acesso ao armazenamento de dados do Firestore.

$ flutter pub add provider

O pacote firebase_ui_auth oferece um conjunto de widgets e utilitários para aumentar a velocidade do desenvolvedor com fluxos de autenticação.

$ flutter pub add firebase_ui_auth

Você adicionou os pacotes necessários, mas também precisa configurar os projetos de execução da Web, do iOS, do Android e do macOS para usar o Firebase adequadamente. Você também usa o pacote provider, que permite separar a lógica de negócios da lógica de exibição.

Instalar a CLI do FlutterFire

A CLI do FlutterFire depende da CLI do Firebase.

Se ainda não fez isso, instale a CLI do Firebase na sua máquina.
Instale a CLI do FlutterFire:

$ dart pub global activate flutterfire_cli

Depois de instalado, o comando flutterfire fica disponível globalmente.

Configurar seus apps

A CLI extrai informações do seu projeto do Firebase e dos apps de projeto selecionados para gerar toda a configuração de uma plataforma específica.

Na raiz do app, execute o comando configure:

$ flutterfire configure

O comando de configuração orienta você nos seguintes processos:

Selecione um projeto do Firebase com base no arquivo .firebaserc ou no Console do Firebase.
Determine as plataformas para configuração, como Android, iOS, macOS e Web.
Identifique os apps do Firebase para extrair a configuração. Por padrão, a CLI tenta corresponder automaticamente aos apps do Firebase com base na configuração atual do projeto.
Gere um arquivo firebase_options.dart no projeto.

Configurar o macOS

O Flutter no macOS cria apps totalmente em sandbox. Como esse app se integra à rede para se comunicar com os servidores do Firebase, é necessário configurar o app com privilégios de cliente de rede.

macos/Runner/DebugProfile.entitlements (link em inglês)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
	<key>com.apple.security.cs.allow-jit</key>
	<true/>
	<key>com.apple.security.network.server</key>
	<true/>
  <!-- Add the following two lines -->
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>

macos/Runner/Release.entitlements (link em inglês)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
  <!-- Add the following two lines -->
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>

Para mais informações, consulte Suporte para o Flutter em computadores.

5. Adicionar a funcionalidade de RSVP

Agora que você adicionou o Firebase ao app, é possível criar um botão de Confirmação de presença que registra pessoas com a Autenticação. Para Android nativo, iOS nativo e Web, há pacotes FirebaseUI Auth pré-criados, mas você precisa criar esse recurso para o Flutter.

O projeto que você extraiu anteriormente incluiu um conjunto de widgets que implementa a interface do usuário para a maior parte do fluxo de autenticação. Você implementa a lógica de negócios para integrar a autenticação ao app.

Adicionar lógica de negócios com o pacote `Provider`

Use o pacote provider para disponibilizar um objeto de estado centralizado do app em toda a árvore de widgets do Flutter:

Crie um novo arquivo chamado app_state.dart com o seguinte conteúdo:

lib/app_state.dart

import 'package:firebase_auth/firebase_auth.dart'
    hide EmailAuthProvider, PhoneAuthProvider;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'firebase_options.dart';

class ApplicationState extends ChangeNotifier {
  ApplicationState() {
    init();
  }

  bool _loggedIn = false;
  bool get loggedIn => _loggedIn;

  Future<void> init() async {
    await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform);

    FirebaseUIAuth.configureProviders([
      EmailAuthProvider(),
    ]);

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loggedIn = true;
      } else {
        _loggedIn = false;
      }
      notifyListeners();
    });
  }
}

As instruções import introduzem o Firebase Core e o Auth, extraem o pacote provider que disponibiliza o objeto de estado do app em toda a árvore de widgets e incluem os widgets de autenticação do pacote firebase_ui_auth.

Esse objeto de estado do aplicativo ApplicationState tem uma responsabilidade principal nessa etapa, que é alertar a árvore de widgets de que houve uma atualização para um estado autenticado.

Você só usa um provedor para comunicar o estado de login de um usuário ao app. Para permitir que um usuário faça login, use as interfaces fornecidas pelo pacote firebase_ui_auth, que é uma ótima maneira de inicializar rapidamente as telas de login nos seus apps.

Integrar o fluxo de autenticação

Modifique as importações na parte de cima do arquivo lib/main.dart:

lib/main.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart'; // new
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';               // new
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';                 // new

import 'app_state.dart';                                 // new
import 'home_page.dart';

Conecte o estado do app à inicialização dele e adicione o fluxo de autenticação a HomePage:

lib/main.dart

void main() {
  // Modify from here...
  WidgetsFlutterBinding.ensureInitialized();

  runApp(ChangeNotifierProvider(
    create: (context) => ApplicationState(),
    builder: ((context, child) => const App()),
  ));
  // ...to here.
}

A modificação na função main() torna o pacote do provedor responsável pela instanciação do objeto de estado do app com o widget ChangeNotifierProvider. Você usa essa classe provider específica porque o objeto de estado do app estende a classe ChangeNotifier, que permite que o pacote provider saiba quando mostrar novamente os widgets dependentes.

Atualize seu app para processar a navegação para diferentes telas que o FirebaseUI oferece criando uma configuração GoRouter:

lib/main.dart

// Add GoRouter configuration outside the App class
final _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
      routes: [
        GoRoute(
          path: 'sign-in',
          builder: (context, state) {
            return SignInScreen(
              actions: [
                ForgotPasswordAction(((context, email) {
                  final uri = Uri(
                    path: '/sign-in/forgot-password',
                    queryParameters: <String, String?>{
                      'email': email,
                    },
                  );
                  context.push(uri.toString());
                })),
                AuthStateChangeAction(((context, state) {
                  final user = switch (state) {
                    SignedIn state => state.user,
                    UserCreated state => state.credential.user,
                    _ => null
                  };
                  if (user == null) {
                    return;
                  }
                  if (state is UserCreated) {
                    user.updateDisplayName(user.email!.split('@')[0]);
                  }
                  if (!user.emailVerified) {
                    user.sendEmailVerification();
                    const snackBar = SnackBar(
                        content: Text(
                            'Please check your email to verify your email address'));
                    ScaffoldMessenger.of(context).showSnackBar(snackBar);
                  }
                  context.pushReplacement('/');
                })),
              ],
            );
          },
          routes: [
            GoRoute(
              path: 'forgot-password',
              builder: (context, state) {
                final arguments = state.uri.queryParameters;
                return ForgotPasswordScreen(
                  email: arguments['email'],
                  headerMaxExtent: 200,
                );
              },
            ),
          ],
        ),
        GoRoute(
          path: 'profile',
          builder: (context, state) {
            return ProfileScreen(
              providers: const [],
              actions: [
                SignedOutAction((context) {
                  context.pushReplacement('/');
                }),
              ],
            );
          },
        ),
      ],
    ),
  ],
);
// end of GoRouter configuration

// Change MaterialApp to MaterialApp.router and add the routerConfig
class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Firebase Meetup',
      theme: ThemeData(
        buttonTheme: Theme.of(context).buttonTheme.copyWith(
              highlightColor: Colors.deepPurple,
            ),
        primarySwatch: Colors.deepPurple,
        textTheme: GoogleFonts.robotoTextTheme(
          Theme.of(context).textTheme,
        ),
        visualDensity: VisualDensity.adaptivePlatformDensity,
        useMaterial3: true,
      ),
      routerConfig: _router, // new
    );
  }
}

Cada tela tem um tipo diferente de ação associada com base no novo estado do fluxo de autenticação. Depois da maioria das mudanças de estado na autenticação, é possível redirecionar para uma tela preferida, seja a tela inicial ou outra, como o perfil.

No método de build da classe HomePage, integre o estado do app ao widget AuthFunc:

lib/home_page.dart

import 'package:firebase_auth/firebase_auth.dart' // new
    hide EmailAuthProvider, PhoneAuthProvider;    // new
import 'package:flutter/material.dart';           // new
import 'package:provider/provider.dart';          // new

import 'app_state.dart';                          // new
import 'src/authentication.dart';                 // new
import 'src/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Firebase Meetup'),
      ),
      body: ListView(
        children: <Widget>[
          Image.asset('assets/codelab.png'),
          const SizedBox(height: 8),
          const IconAndDetail(Icons.calendar_today, 'October 30'),
          const IconAndDetail(Icons.location_city, 'San Francisco'),
          // Add from here
          Consumer<ApplicationState>(
            builder: (context, appState, _) => AuthFunc(
                loggedIn: appState.loggedIn,
                signOut: () {
                  FirebaseAuth.instance.signOut();
                }),
          ),
          // to here
          const Divider(
            height: 8,
            thickness: 1,
            indent: 8,
            endIndent: 8,
            color: Colors.grey,
          ),
          const Header("What we'll be doing"),
          const Paragraph(
            'Join us for a day full of Firebase Workshops and Pizza!',
          ),
        ],
      ),
    );
  }
}

Você instancia o widget AuthFunc e o envolve em um widget Consumer. O widget Consumer é a maneira usual de usar o pacote provider para reconstruir parte da árvore quando o estado do app muda. O widget AuthFunc são os widgets complementares que você testa.

Testar o fluxo de autenticação

No app, toque no botão RSVP para iniciar o SignInScreen.

Insira um endereço de e-mail. Se você já estiver registrado, o sistema vai solicitar que você insira uma senha. Caso contrário, o sistema vai solicitar que você preencha o formulário de registro.

Digite uma senha com menos de seis caracteres para verificar o fluxo de tratamento de erros. Se você estiver registrado, a senha vai aparecer.
Insira senhas incorretas para verificar o fluxo de tratamento de erros.
Insira a senha correta. Você vai encontrar a experiência de login, que permite que o usuário saia.

6. Gravar mensagens no Firestore

É ótimo saber que os usuários estão chegando, mas você precisa dar aos convidados algo mais para fazer no app. E se eles pudessem deixar mensagens em um livro de visitas? Ele pode compartilhar por que está animado para vir ou quem espera conhecer.

Para armazenar as mensagens de chat que os usuários escrevem no app, use o Firestore.

Modelo de dados

O Firestore é um banco de dados NoSQL, e os dados armazenados nele são divididos em coleções, documentos, campos e subcoleções. Você armazena cada mensagem do chat como um documento em uma coleção guestbook, que é uma coleção de nível superior.

Adicione mensagens ao Firestore

Nesta seção, você vai adicionar a funcionalidade para que os usuários escrevam mensagens no banco de dados. Primeiro, você adiciona um campo de formulário e um botão de envio e, em seguida, o código que conecta esses elementos ao banco de dados.

Crie um novo arquivo chamado guest_book.dart e adicione um widget com estado GuestBook para construir os elementos da interface de um campo de mensagem e um botão de envio:

lib/guest_book.dart

import 'dart:async';

import 'package:flutter/material.dart';

import 'src/widgets.dart';

class GuestBook extends StatefulWidget {
  const GuestBook({required this.addMessage, super.key});

  final FutureOr<void> Function(String message) addMessage;

  @override
  State<GuestBook> createState() => _GuestBookState();
}

class _GuestBookState extends State<GuestBook> {
  final _formKey = GlobalKey<FormState>(debugLabel: '_GuestBookState');
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Form(
        key: _formKey,
        child: Row(
          children: [
            Expanded(
              child: TextFormField(
                controller: _controller,
                decoration: const InputDecoration(
                  hintText: 'Leave a message',
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Enter your message to continue';
                  }
                  return null;
                },
              ),
            ),
            const SizedBox(width: 8),
            StyledButton(
              onPressed: () async {
                if (_formKey.currentState!.validate()) {
                  await widget.addMessage(_controller.text);
                  _controller.clear();
                }
              },
              child: Row(
                children: const [
                  Icon(Icons.send),
                  SizedBox(width: 4),
                  Text('SEND'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Há alguns pontos de interesse aqui. Primeiro, você instancia um formulário para validar se a mensagem realmente contém conteúdo e mostrar uma mensagem de erro ao usuário se não houver nenhum. Para validar um formulário, acesse o estado do formulário com um GlobalKey. Para mais informações sobre as chaves e como usá-las, consulte Quando usar chaves.

Observe também a disposição dos widgets. Você tem um Row com um TextFormField e um StyledButton, que contém um Row. Observe também que o TextFormField está envolvido em um widget Expanded, o que força o TextFormField a preencher qualquer espaço extra na linha. Para entender melhor por que isso é necessário, consulte Noções básicas sobre restrições.

Agora que você tem um widget que permite ao usuário inserir texto para adicionar ao Livro de visitas, é necessário colocá-lo na tela.

Edite o corpo de HomePage para adicionar as duas linhas a seguir no final dos filhos de ListView:

const Header("What we'll be doing"),
const Paragraph(
  'Join us for a day full of Firebase Workshops and Pizza!',
),
// Add the following two lines.
const Header('Discussion'),
GuestBook(addMessage: (message) => print(message)),

Embora isso seja suficiente para exibir o widget, não é suficiente para fazer algo útil. Você vai atualizar esse código em breve para que ele funcione.

Visualização do app

Quando um usuário clica em ENVIAR, o snippet de código abaixo é acionado. Ele adiciona o conteúdo do campo de entrada de mensagem à coleção guestbook do banco de dados. Especificamente, o método addMessageToGuestBook adiciona o conteúdo da mensagem a um novo documento com um ID gerado automaticamente na coleção guestbook.

FirebaseAuth.instance.currentUser.uid é uma referência ao ID exclusivo gerado automaticamente que a Autenticação fornece para todos os usuários conectados.

No arquivo lib/app_state.dart, adicione o método addMessageToGuestBook. Você vai conectar esse recurso à interface do usuário na próxima etapa.

lib/app_state.dart

import 'package:cloud_firestore/cloud_firestore.dart'; // new
import 'package:firebase_auth/firebase_auth.dart'
    hide EmailAuthProvider, PhoneAuthProvider;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'firebase_options.dart';

class ApplicationState extends ChangeNotifier {

  // Current content of ApplicationState elided ...

  // Add from here...
  Future<DocumentReference> addMessageToGuestBook(String message) {
    if (!_loggedIn) {
      throw Exception('Must be logged in');
    }

    return FirebaseFirestore.instance
        .collection('guestbook')
        .add(<String, dynamic>{
      'text': message,
      'timestamp': DateTime.now().millisecondsSinceEpoch,
      'name': FirebaseAuth.instance.currentUser!.displayName,
      'userId': FirebaseAuth.instance.currentUser!.uid,
    });
  }
  // ...to here.
}

Conectar a interface e o banco de dados

Você tem uma interface em que o usuário pode inserir o texto que quer adicionar ao livro de visitas e tem o código para adicionar a entrada ao Firestore. Agora, basta conectar os dois.

No arquivo lib/home_page.dart, faça a seguinte alteração no widget HomePage:

lib/home_page.dart

import 'package:firebase_auth/firebase_auth.dart'
    hide EmailAuthProvider, PhoneAuthProvider;
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'app_state.dart';
import 'guest_book.dart';                         // new
import 'src/authentication.dart';
import 'src/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Firebase Meetup'),
      ),
      body: ListView(
        children: <Widget>[
          Image.asset('assets/codelab.png'),
          const SizedBox(height: 8),
          const IconAndDetail(Icons.calendar_today, 'October 30'),
          const IconAndDetail(Icons.location_city, 'San Francisco'),
          Consumer<ApplicationState>(
            builder: (context, appState, _) => AuthFunc(
                loggedIn: appState.loggedIn,
                signOut: () {
                  FirebaseAuth.instance.signOut();
                }),
          ),
          const Divider(
            height: 8,
            thickness: 1,
            indent: 8,
            endIndent: 8,
            color: Colors.grey,
          ),
          const Header("What we'll be doing"),
          const Paragraph(
            'Join us for a day full of Firebase Workshops and Pizza!',
          ),
          // Modify from here...
          Consumer<ApplicationState>(
            builder: (context, appState, _) => Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                if (appState.loggedIn) ...[
                  const Header('Discussion'),
                  GuestBook(
                    addMessage: (message) =>
                        appState.addMessageToGuestBook(message),
                  ),
                ],
              ],
            ),
          ),
          // ...to here.
        ],
      ),
    );
  }
}

Você substituiu as duas linhas adicionadas no início desta etapa pela implementação completa. Você usa Consumer<ApplicationState> novamente para disponibilizar o estado do app para a parte da árvore renderizada. Assim, você pode reagir a alguém que insere uma mensagem na interface e a publica no banco de dados. Na próxima seção, você vai testar se as mensagens adicionadas são publicadas no banco de dados.

Teste o envio de mensagens

Se necessário, faça login no app.
Digite uma mensagem, como Hey there!, e clique em ENVIAR.

Essa ação grava a mensagem no banco de dados do Firestore. No entanto, você não vai encontrar a mensagem no app Flutter real porque ainda é necessário implementar a recuperação dos dados, o que será feito na próxima etapa. No entanto, no painel Banco de Dados do Console do Firebase, você pode conferir a mensagem adicionada na coleção guestbook. Se você enviar mais mensagens, vai adicionar mais documentos à sua coleção guestbook. Por exemplo, confira o snippet de código a seguir:

7. Leia mensagens

É ótimo que os convidados possam escrever mensagens no banco de dados, mas eles ainda não podem acessá-las no app. É hora de corrigir isso.

Sincronizar mensagens

Para mostrar mensagens, adicione listeners que são acionados quando os dados mudam e crie um elemento da interface que mostre novas mensagens. Você adiciona um código ao estado do app que detecta mensagens recém-adicionadas.

Crie um novo arquivo guest_book_message.dart e adicione a classe a seguir para expor uma visualização estruturada dos dados armazenados no Firestore.

lib/guest_book_message.dart

class GuestBookMessage {
  GuestBookMessage({required this.name, required this.message});

  final String name;
  final String message;
}

No arquivo lib/app_state.dart, adicione as seguintes importações:

lib/app_state.dart

import 'dart:async';                                     // new

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart'
    hide EmailAuthProvider, PhoneAuthProvider;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'firebase_options.dart';
import 'guest_book_message.dart';                        // new

Na seção de ApplicationState em que você define o estado e os getters, adicione as seguintes linhas:

lib/app_state.dart

  bool _loggedIn = false;
  bool get loggedIn => _loggedIn;

  // Add from here...
  StreamSubscription<QuerySnapshot>? _guestBookSubscription;
  List<GuestBookMessage> _guestBookMessages = [];
  List<GuestBookMessage> get guestBookMessages => _guestBookMessages;
  // ...to here.

Na seção de inicialização de ApplicationState, adicione as linhas a seguir para se inscrever em uma consulta sobre a coleção de documentos quando um usuário fizer login e cancelar a inscrição quando ele sair:

lib/app_state.dart

  Future<void> init() async {
    await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform);

    FirebaseUIAuth.configureProviders([
      EmailAuthProvider(),
    ]);
    
    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loggedIn = true;
        _guestBookSubscription = FirebaseFirestore.instance
            .collection('guestbook')
            .orderBy('timestamp', descending: true)
            .snapshots()
            .listen((snapshot) {
          _guestBookMessages = [];
          for (final document in snapshot.docs) {
            _guestBookMessages.add(
              GuestBookMessage(
                name: document.data()['name'] as String,
                message: document.data()['text'] as String,
              ),
            );
          }
          notifyListeners();
        });
      } else {
        _loggedIn = false;
        _guestBookMessages = [];
        _guestBookSubscription?.cancel();
      }
      notifyListeners();
    });
  }

Esta seção é importante porque é nela que você constrói uma consulta sobre a coleção guestbook e processa a inscrição e a desativação da assinatura dela. Você ouve o stream, onde você reconstrói um cache local das mensagens na coleção guestbook e também armazena uma referência a essa assinatura para que você possa cancelar a inscrição mais tarde. Há muitas coisas acontecendo aqui, então você deve analisar isso em um depurador para inspecionar o que acontece e ter um modelo mental mais claro. Para mais informações, consulte Receber atualizações em tempo real com o Firestore.

No arquivo lib/guest_book.dart, adicione a seguinte importação:

import 'guest_book_message.dart';

No widget GuestBook, adicione uma lista de mensagens como parte da configuração para conectar esse estado em mudança à interface do usuário:

lib/guest_book.dart

class GuestBook extends StatefulWidget {
  // Modify the following line:
  const GuestBook({
    super.key, 
    required this.addMessage, 
    required this.messages,
  });

  final FutureOr<void> Function(String message) addMessage;
  final List<GuestBookMessage> messages; // new

  @override
  _GuestBookState createState() => _GuestBookState();
}

Em _GuestBookState, modifique o método build da seguinte maneira para expor essa configuração:

lib/guest_book.dart

class _GuestBookState extends State<GuestBook> {
  final _formKey = GlobalKey<FormState>(debugLabel: '_GuestBookState');
  final _controller = TextEditingController();

  @override
  // Modify from here...
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // ...to here.
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Form(
            key: _formKey,
            child: Row(
              children: [
                Expanded(
                  child: TextFormField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      hintText: 'Leave a message',
                    ),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Enter your message to continue';
                      }
                      return null;
                    },
                  ),
                ),
                const SizedBox(width: 8),
                StyledButton(
                  onPressed: () async {
                    if (_formKey.currentState!.validate()) {
                      await widget.addMessage(_controller.text);
                      _controller.clear();
                    }
                  },
                  child: Row(
                    children: const [
                      Icon(Icons.send),
                      SizedBox(width: 4),
                      Text('SEND'),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        // Modify from here...
        const SizedBox(height: 8),
        for (var message in widget.messages)
          Paragraph('${message.name}: ${message.message}'),
        const SizedBox(height: 8),
      ],
      // ...to here.
    );
  }
}

Você envolve o conteúdo anterior do método build() com um widget Column e adiciona uma coleção para na cauda dos filhos do Column para gerar uma nova Paragraph para cada mensagem na lista de mensagens.

Atualize o corpo de HomePage para construir corretamente GuestBook com o novo parâmetro messages:

lib/home_page.dart

Consumer<ApplicationState>(
  builder: (context, appState, _) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      if (appState.loggedIn) ...[
        const Header('Discussion'),
        GuestBook(
          addMessage: (message) =>
              appState.addMessageToGuestBook(message),
          messages: appState.guestBookMessages, // new
        ),
      ],
    ],
  ),
),

Testar a sincronização de mensagens

O Firestore sincroniza dados de forma automática e instantânea com os clientes inscritos no banco de dados.

Testar a sincronização de mensagens:

No app, encontre as mensagens que você criou anteriormente no banco de dados.
Escrever novas mensagens. Eles aparecem instantaneamente.
Abra o espaço de trabalho em várias janelas ou guias. As mensagens são sincronizadas em tempo real nas janelas e guias.
Opcional: no menu Database do Console do Firebase, exclua, modifique ou adicione manualmente novas mensagens. Todas as mudanças aparecem na interface.

Parabéns! Você lê documentos do Firestore no seu app.

Visualização do app

8. Configurar regras de segurança básicas

Você configurou o Firestore inicialmente para usar o modo de teste, o que significa que seu banco de dados está aberto para leituras e gravações. No entanto, você só deve usar o modo de teste durante os estágios iniciais do desenvolvimento. Como prática recomendada, configure regras de segurança para o banco de dados durante o desenvolvimento do app. A segurança é parte integrante da estrutura e do comportamento do app.

Com as regras de segurança do Firebase, você pode controlar o acesso a documentos e coleções no seu banco de dados. Com a sintaxe de regras flexíveis, você pode criar regras que correspondem a várias operações, de todas as gravações em todo o banco de dados até operações em um documento específico.

Configure regras de segurança básicas:

No menu Desenvolver do Console do Firebase, clique em Database > Rules. As seguintes regras de segurança padrão e um aviso sobre as regras serem públicas vão aparecer:

Identifique as coleções em que o app grava dados:

Em match /databases/{database}/documents, identifique a coleção que você quer proteger:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

Como você usou o UID de autenticação como um campo em cada documento do livro de visitas, é possível conferir o UID de autenticação e verificar se qualquer pessoa que tentar escrever no documento tem um UID de autenticação correspondente.

Adicione as regras de leitura e gravação ao conjunto de regras:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow write:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

Agora, apenas os usuários conectados podem ler as mensagens no livro de visitas, mas apenas o autor de uma mensagem pode editá-la.

Adicione a validação de dados para garantir que todos os campos esperados estejam presentes no documento:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow write:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

9. Etapa extra: pratique o que aprendeu

Registrar o status de RSVP de um participante

No momento, o app só permite que as pessoas conversem quando estão interessadas no evento. Além disso, a única maneira de saber se alguém vai participar é quando a pessoa diz isso no chat.

Nesta etapa, você se organiza e informa às pessoas quantas pessoas vão comparecer. Você adiciona alguns recursos ao estado do app. A primeira é a capacidade de um usuário conectado de indicar se ele vai participar. O segundo é um contador de quantas pessoas estão participando.

No arquivo lib/app_state.dart, adicione as linhas a seguir à seção de acessórios do ApplicationState para que o código da IU possa interagir com esse estado:

lib/app_state.dart

int _attendees = 0;
int get attendees => _attendees;

Attending _attending = Attending.unknown;
StreamSubscription<DocumentSnapshot>? _attendingSubscription;
Attending get attending => _attending;
set attending(Attending attending) {
  final userDoc = FirebaseFirestore.instance
      .collection('attendees')
      .doc(FirebaseAuth.instance.currentUser!.uid);
  if (attending == Attending.yes) {
    userDoc.set(<String, dynamic>{'attending': true});
  } else {
    userDoc.set(<String, dynamic>{'attending': false});
  }
}

Atualize o método init() do ApplicationState desta forma:

lib/app_state.dart

  Future<void> init() async {
    await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform);

    FirebaseUIAuth.configureProviders([
      EmailAuthProvider(),
    ]);

    // Add from here...
    FirebaseFirestore.instance
        .collection('attendees')
        .where('attending', isEqualTo: true)
        .snapshots()
        .listen((snapshot) {
      _attendees = snapshot.docs.length;
      notifyListeners();
    });
    // ...to here.

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loggedIn = true;
        _emailVerified = user.emailVerified;
        _guestBookSubscription = FirebaseFirestore.instance
            .collection('guestbook')
            .orderBy('timestamp', descending: true)
            .snapshots()
            .listen((snapshot) {
          _guestBookMessages = [];
          for (final document in snapshot.docs) {
            _guestBookMessages.add(
              GuestBookMessage(
                name: document.data()['name'] as String,
                message: document.data()['text'] as String,
              ),
            );
          }
          notifyListeners();
        });
        // Add from here...
        _attendingSubscription = FirebaseFirestore.instance
            .collection('attendees')
            .doc(user.uid)
            .snapshots()
            .listen((snapshot) {
          if (snapshot.data() != null) {
            if (snapshot.data()!['attending'] as bool) {
              _attending = Attending.yes;
            } else {
              _attending = Attending.no;
            }
          } else {
            _attending = Attending.unknown;
          }
          notifyListeners();
        });
        // ...to here.
      } else {
        _loggedIn = false;
        _emailVerified = false;
        _guestBookMessages = [];
        _guestBookSubscription?.cancel();
        _attendingSubscription?.cancel(); // new
      }
      notifyListeners();
    });
  }

Esse código adiciona uma consulta sempre assinada para determinar o número de participantes e uma segunda consulta que só fica ativa enquanto um usuário está conectado para determinar se o usuário está participando.

Adicione a seguinte enumeração na parte de cima do arquivo lib/app_state.dart.

lib/app_state.dart

enum Attending { yes, no, unknown }

Crie um novo arquivo yes_no_selection.dart e defina um novo widget que funciona como botões de opção:

lib/yes_no_selection.dart

import 'package:flutter/material.dart';

import 'app_state.dart';
import 'src/widgets.dart';

class YesNoSelection extends StatelessWidget {
  const YesNoSelection(
      {super.key, required this.state, required this.onSelection});
  final Attending state;
  final void Function(Attending selection) onSelection;

  @override
  Widget build(BuildContext context) {
    switch (state) {
      case Attending.yes:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              FilledButton(
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              TextButton(
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
      case Attending.no:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              TextButton(
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              FilledButton(
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
      default:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              StyledButton(
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              StyledButton(
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
    }
  }
}

Ele começa em um estado indeterminado sem Sim nem Não selecionado. Depois que o usuário seleciona se vai participar, mostre essa opção destacada com um botão preenchido e a outra opção com uma renderização plana.

Atualize o método build() da HomePage para aproveitar o YesNoSelection, permitir que um usuário conectado indique se está participando e mostre o número de participantes do evento:

lib/home_page.dart

Consumer<ApplicationState>(
  builder: (context, appState, _) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // Add from here...
      switch (appState.attendees) {
        1 => const Paragraph('1 person going'),
        >= 2 => Paragraph('${appState.attendees} people going'),
        _ => const Paragraph('No one going'),
      },
      // ...to here.
      if (appState.loggedIn) ...[
        // Add from here...
        YesNoSelection(
          state: appState.attending,
          onSelection: (attending) => appState.attending = attending,
        ),
        // ...to here.
        const Header('Discussion'),
        GuestBook(
          addMessage: (message) =>
              appState.addMessageToGuestBook(message),
          messages: appState.guestBookMessages,
        ),
      ],
    ],
  ),
),

Adicionar regras

Você já definiu algumas regras, então os dados adicionados com os botões serão rejeitados. É necessário atualizar as regras para permitir adições à coleção attendees.

Na coleção attendees, extraia o UID de autenticação que você usou como nome do documento e verifique se o uid do remetente é o mesmo do documento que ele está escrevendo:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}

Assim, todos podem ler a lista de participantes porque não há dados pessoais nela, mas apenas o criador pode atualizar.

Adicione a validação de dados para garantir que todos os campos esperados estejam presentes no documento:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

Opcional: no app, clique nos botões para conferir os resultados no painel do Firestore no Console do Firebase.

Visualização do app

10. Parabéns!

Você usou o Firebase para criar um app da Web interativo e em tempo real.

Introdução ao Firebase para Flutter

1. Antes de começar

Pré-requisitos

O que você vai aprender

Pré-requisitos

2. Acessar o exemplo de código

Importar o app inicial

Localizar os arquivos que precisam de trabalho

Revise o arquivo lib/main.dart

3. Criar e configurar um projeto do Firebase

Criar um projeto do Firebase

Ativar a autenticação de login por e-mail

Configurar o Firestore

4. Configurar o Firebase

Configurar dependências

Instalar a CLI do FlutterFire

Configurar seus apps

Configurar o macOS

macos/Runner/DebugProfile.entitlements (link em inglês)

macos/Runner/Release.entitlements (link em inglês)

5. Adicionar a funcionalidade de RSVP

Adicionar lógica de negócios com o pacote Provider

Integrar o fluxo de autenticação

Testar o fluxo de autenticação

6. Gravar mensagens no Firestore

Modelo de dados

Adicione mensagens ao Firestore

Visualização do app

Conectar a interface e o banco de dados

Teste o envio de mensagens

7. Leia mensagens

Sincronizar mensagens

Testar a sincronização de mensagens

Visualização do app

8. Configurar regras de segurança básicas

9. Etapa extra: pratique o que aprendeu

Registrar o status de RSVP de um participante

Adicionar regras

Visualização do app

10. Parabéns!

Saiba mais

Revise o arquivo `lib/main.dart`

Adicionar lógica de negócios com o pacote `Provider`