Criando um Chat Completo Usando Flutter e Firebase – Parte 1

Está cada vez mais comum acompanharmos o surgimento de novos aplicativos de interação social sendo criados por aí, e por isso, decidi criar um chat usando Flutter e Firebase.
Pensei que seria bem legal e desafiador escrever uma aplicação de conversa em tempo real e depois transformar em artigo para que mais pessoas pudessem acompanhar o desenvolvimento de algo desse tipo.
Esse artigo será dividido em 3 partes: chat, envio de mídia e confirmação de leitura.

Primeiro, vamos escolher o nome do nosso aplicativo. O nome do meu será “MyChat”, por ser um nome curto e objetivo.
Vamos criar o projeto Flutter, para isso digite o comando:
flutter create mychat

Depois que o nosso projeto for gerado, vamos acessar o diretório para podermos instalar algumas dependências do Firebase.
cd mychat

Adicionando as dependências e configurando o Firebase

Agora iremos adicionar nas dependências do projeto os pacotes firebase_core e cloud_firestore, pacotes importantes para podermos configurar e nos comunicar com o Firebase.
flutter pub add firebase_core flutter pub add cloud_firestore

Também vamos adicionar a dependência que vai nos ajudar no momento de trabalhar com datas:
flutter pub add intl

Agora, precisamos instalar o Firebase CLI para preparar o nosso app com as configurações do nosso projeto no Firebase.
dart pub global activate flutterfire_cli

Antes de seguirmos, precisamos fazer a autenticação no Firebase CLI que acabamos de instalar, digite o comando:
firebase login

Agora que estamos autenticados no Firebase CLI, precisamos gerar o arquivo de configuração do Firebase para que a integração seja feita de fato. Para isto, precisamos digitar o seguinte comando:
flutterfire configure

Atenção: Se você estiver recebendo uma mensagem de erro com a mensagem “uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:cloud_firestore]”, vá ao arquivo android/app/build.gradle e mude a versão do minSdkVersion de 16 para 21.
Note que será apresentado alguns passos para preenchermos com informações que ficarão registradas no nosso arquivo de configuração firebase_options.dart que será gerado no final.
Preencheremos da seguinte forma:
Select a Firebase project to configure your Flutter application with: Escolha a opção <create a new project>
Enter a project id for your new Firebase project: Dê um nome único ao seu projeto no Firebase, o meu ficará my-chat-[id_aleatório].
Which platforms should your configuration support: Nosso tutorial será feito no Android, então só selecionarei Android.

No final será perguntado se você deseja atualizar os arquivos build.gradle, é só pressionar Enter para aceitar e finalizar.

Um arquivo firebase_options.dart foi criado na raiz da estrutura do projeto, nele fica reunido todas as informações necessárias para se conectar com o nosso projeto no FIrebase.

Agora precisamos ir no arquivo lib/main.dart e inserir o código que inicializa o Firebase na aplicação. Acrescente o seguinte bloco de código no método main(). Não esqueça de colocar o async no método main() e de importar o pacote firebase_core e o arquivo firebase_options que se encontra na pasta /lib.

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

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

Acabamos de colocar o método que inicializa o Firebase na nossa aplicação, agora precisamos criar a model da mensagem.

Model

No diretório /lib, crie uma pasta chamada models e dentro dela crie um arquivo chamado message_model.dart. A classe da nossa model terá três propriedades, são elas: author, message e timestamp. O código ficará assim:

import 'package:cloud_firestore/cloud_firestore.dart';
 
class MessageModel {
 String author;
 String message;
 Timestamp timestamp;
 
 MessageModel(
     {required this.author, required this.message, required this.timestamp});
 
 Map<String, dynamic> toJson() {
   return {
     'author': author,
     'message': message,
     'timestamp': timestamp,
   };
 }
 
 factory MessageModel.fromDocument(DocumentSnapshot documentSnapshot) {
   String author = documentSnapshot.get('author');
   String message = documentSnapshot.get('message');
   Timestamp timestamp = documentSnapshot.get('timestamp');
 
   return MessageModel(author: author, message: message, timestamp: timestamp);
 }
}

Provider

Depois da nossa model criada, vamos escrever o código do nosso provider. O provider ficará responsável pelas requisições feitas no Firestore, é nele que criaremos os métodos que envia as mensagens e que recupera as mensagens enviadas.
No diretório /lib, crie uma pasta chamada providers e dentro dela crie um arquivo chamado chat_provider.dart.
O código ficará da seguinte forma:

import 'package:cloud_firestore/cloud_firestore.dart';
import '../models/message_model.dart';
 
class ChatProvider {
 final FirebaseFirestore firebaseFirestore;
 
 ChatProvider({required this.firebaseFirestore});
 
 Stream<QuerySnapshot> getMessageList() {
   return firebaseFirestore
       .collection('messages')
       .orderBy('timestamp', descending: true)
       .snapshots();
 }
 
 void sendMessage(String message, String author) {
   MessageModel chatMessages = MessageModel(
     author: author,
     timestamp: Timestamp.now(),
     message: message,
   );
 
   firebaseFirestore.collection('messages').add(chatMessages.toJson());
 }
}

Tela da “sala de entrada”

No diretório lib, crie uma pasta chamada “screens” e nela crie um arquivo “enter_room_screen.dart”, ficando da seguinte forma: lib/screens/enter_room_screen.dart. Nessa tela o usuário poderá inserir um nickname no input que criamos, logo abaixo terá um botão para ele entrar na sala do chat.
O código ficará da seguinte forma:

import 'package:flutter/material.dart';
 
class EnterRoomScreen extends StatelessWidget {
 EnterRoomScreen({Key? key}) : super(key: key);
 
 final TextEditingController _nicknameEditingController =
     TextEditingController();
 
 @override
 Widget build(BuildContext context) {
   return GestureDetector(
     onTap: () => FocusScope.of(context).unfocus(),
     child: Scaffold(
       backgroundColor: const Color(0XFF23272a),
       body: Center(
         child: Padding(
           padding: const EdgeInsets.all(12.0),
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: <Widget>[
               const Text(
                 'Seu nickname é...',
                 style: TextStyle(fontSize: 20, color: Colors.white),
               ),
               const SizedBox(height: 12),
               _nicknameInput(),
               const SizedBox(height: 12),
               _enterButton(context),
             ],
           ),
         ),
       ),
     ),
   );
 }
 
 Widget _nicknameInput() {
   return TextFormField(
     textInputAction: TextInputAction.done,
     controller: _nicknameEditingController,
     onChanged: (value) {},
     cursorColor: const Color(0xff9b84ec),
     style: const TextStyle(color: Colors.white),
     decoration: const InputDecoration(
       floatingLabelBehavior: FloatingLabelBehavior.never,
       contentPadding: EdgeInsets.all(20.0),
       filled: true,
       fillColor: Color(0xff2f3136),
       labelText: 'Nickname',
       suffixText: 'Nickname',
       hintStyle: TextStyle(color: Colors.white54),
       labelStyle: TextStyle(color: Colors.white54),
       enabledBorder: OutlineInputBorder(
         borderSide: BorderSide(color: Colors.black26),
       ),
       focusedBorder: OutlineInputBorder(
         borderSide: BorderSide(color: Color(0xff9b84ec), width: 1),
         borderRadius: BorderRadius.all(Radius.circular(8.0)),
       ),
       border: OutlineInputBorder(
         borderSide: BorderSide(color: Colors.red, width: 5),
         borderRadius: BorderRadius.all(Radius.circular(8.0)),
         gapPadding: 8.0,
       ),
     ),
   );
 }
 
 Widget _enterButton(context) {
   return Row(
     children: [
       Expanded(
         child: ElevatedButton(
           onPressed: () {
             Navigator.pushNamed(context, '/chat',
                 arguments: _nicknameEditingController.text);
             _nicknameEditingController.clear();
           },
           child: const Text('Entrar'),
           style: ElevatedButton.styleFrom(
             textStyle: const TextStyle(
               fontSize: 14,
               fontWeight: FontWeight.w500,
             ),
             primary: const Color(0xff9b84ec),
           ),
         ),
       ),
     ],
   );
 }
}

No código acima montamos uma tela que terá um título, um campo de texto para o usuário inserir o nickname e um campo para entrar na sala.
Agora vou explicar o que cada parte do código faz:
_nicknameEditingController: Controller que salvará o valor do campo nickname
_nicknameInput: Cria um widget com um campo de texto
_enterButton: Botão para entrar no chat, onde seu evento principal é redirecionar o usuário para a rota “/chat” e enviar o valor do nickname como argumento. Logo após o usuário ser redirecionado, o campo nickname é limpo usando o método clear() do nicknameEditingController.
Você deve estar se perguntando, “mas que rota é essa?“…bom, mais pra frente eu explico.

Tela da conversa

Criaremos agora a tela do chat, onde o usuário poderá visualizar todas as mensagens, digitar mensagens e enviar.
No diretório lib/screens, crie um arquivo chamado chat_screen.dart.
Na nossa classe iremos criar uma instância do Firestore:

final ChatProvider = ChatProvider(firebaseFirestore: FirebaseFirestore.instance);

Depois precisamos criar um controlador de input para armazenar a mensagem que o usuário pretende enviar:

final TextEditingController messageEditingController = TextEditingController();

Agora, temos que criar a variável onde será armazenada as mensagens, assim que tivermos um retorno da nossa requisição no Firebase:

 List<QueryDocumentSnapshot> messageList = [];

Até o momento nossa classe se parecerá com isso:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
 
import '../providers/chat_provider.dart';
 
class ChatScreen extends StatefulWidget {
const ChatScreen({Key? key}) : super(key: key);
@override
State<ChatScreen> createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
final ChatProvider chatProvider =
    ChatProvider(firebaseFirestore: FirebaseFirestore.instance);
final TextEditingController messageEditingController =
    TextEditingController();
List<QueryDocumentSnapshot> messageList = [];
final ScrollController scrollController = ScrollController();
@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: const Color(0XFF36393f),
    appBar: AppBar(
      centerTitle: true,
      backgroundColor: const Color(0XFF23272a),
      elevation: 1,
      title: const Text('My.chat', style: TextStyle(fontSize: 16)),
    ),
    body: Stack(
      children: const <Widget>[
      ],
    ),
  );
}
}

Agora precisamos criar dois métodos, um que será responsável pelo envio das mensagens e outro para pegarmos o nickname do usuário.
sendMessage: Responsável por registrar as mensagens no Firestore,
onde receberá o texto da mensagem como seu único argumento. Além de criar novos registros no Firebase, a função fica responsável por limpar nosso input de mensagem e também de descer o scroll para a base de uma forma suavizada.
Perceba que antes de enviar a mensagem, nós verificamos se o campo da mensagem está vazio, se estiver, o método de enviar não é chamado. Também, usamos a função trim() ao enviar a mensagem, para que espaços em brancos antes e depois da mensagem sejam removidos.
currentUser: Nos retorna o nickname que foi passado como argumento para a rota.
Nosso método sendMessage ficará assim:

void sendMessage(String message) {
   if (message.isNotEmpty) {
     messageEditingController.clear();
     chatProvider.sendMessage(message.trim(), currentUser(context));
     scrollController.animateTo(0,
         duration: const Duration(milliseconds: 300), curve: Curves.easeOut);
   }
 }

E o nosso método de pegar o nickname do usuário ficará desse jeito:

currentUser(context) => ModalRoute.of(context)?.settings.arguments as String;

Depois dessas adições, nosso código ficará assim:

import 'package:cloud_firestore/cloud_firestore.dart';
import '../providers/chat_provider.dart';

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

  @override
    State<ChatScreen> createState() => _ChatScreenState();
  }

  class _ChatScreenState extends State<ChatScreen> {
    final ChatProvider chatProvider = ChatProvider(firebaseFirestore: FirebaseFirestore.instance);
    final TextEditingController messageEditingController = TextEditingController();
    List<QueryDocumentSnapshot> messageList = [];
    final ScrollController scrollController = ScrollController();

    @override
    Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0XFF36393f),
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: const Color(0XFF23272a),
        elevation: 1,
        title: const Text(‘My.chat’, style: TextStyle(fontSize: 16)),
      ),
      body: Stack(
        children: const <Widget>[
        ],
      ),
    );
  }
}

Nada será renderizado na nossa tela, ainda. Precisamos criar nossos widgets.
Veja na imagem abaixo quais widgets iremos criar:

Começaremos criando nosso widget do timestamp, como o nome já diz será um widget para exibir a data e hora que a mensagem foi enviada. No diretório lib, crie um diretório chamado widgets, dentro deste diretório crie um arquivo com o nome message_timestamp.dart. Nosso código ficará assim:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
 
class MessageTimestampWidget extends StatelessWidget {
 const MessageTimestampWidget({
   Key? key,
   required this.timestamp,
 }) : super(key: key);
 
 final Timestamp timestamp;
 
 @override
 Widget build(BuildContext context) {
   const datePattern = 'dd MMM yyyy, HH:mm';
   final timestampFormatted =
       DateFormat(datePattern).format(timestamp.toDate());
 
   return Container(
     margin: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
     child: Text(
       timestampFormatted,
       style: const TextStyle(
           color: Colors.grey, fontSize: 12, fontStyle: FontStyle.italic),
     ),
   );
 }
}

Perceba que nosso widget recebe um argumento com o timestamp que irá ser exibido logo após formatarmos usando o DateFormat do Intl. Na linha anterior a esta, criamos uma constante chamada datePattern para determinarmos como queremos que o timestamp seja formatado.
Agora, criaremos nosso widget do message bubble. No diretório lib/widgets, crie um arquivo chamado message_bubble.dart.
Nosso widget recebe dois argumentos: chatMessage e isMe.
chatMessage: um objeto da mensagem com as propriedades author, timestamp e message.
isMe: um boolean para determinar se a mensagem está sendo enviada ou recebida. Isto vai nos ajudar a diferenciar o próprio widget, estilizando e posicionando corretamente.
O código ficará assim:

import 'package:flutter/material.dart';
 
import '../models/message_model.dart';
import 'message_timestamp.dart';
 
class MessageBubbleWidget extends StatelessWidget {
 const MessageBubbleWidget({
   Key? key,
   required this.chatMessage,
   required this.isMe,
 }) : super(key: key);
 
 final MessageModel chatMessage;
 final bool isMe;
 
 @override
 Widget build(BuildContext context) {
   return Column(
     crossAxisAlignment:
         isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
     children: [
       Row(
         mainAxisAlignment:
             isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
         children: [
           Container(
             padding: const EdgeInsets.all(10),
             margin: isMe
                 ? const EdgeInsets.only(right: 10)
                 : const EdgeInsets.only(left: 10),
             width: 200,
             decoration: BoxDecoration(
               color: isMe ? Colors.green : Colors.black12,
               borderRadius: BorderRadius.circular(10),
             ),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 Text(
                   chatMessage.author,
                   style: const TextStyle(fontSize: 13, color: Colors.white),
                 ),
                 const SizedBox(height: 5),
                 Text(
                   chatMessage.message,
                   style: const TextStyle(fontSize: 16, color: Colors.white),
                 ),
               ],
             ),
           ),
         ],
       ),
       MessageTimestampWidget(timestamp: chatMessage.timestamp),
     ],
   );
 }
}

Precisamos criar agora o input onde o usuário digitará a mensagem a ser enviada, no diretório lib/widgets, iremos criar o arquivo chamado input_message.dart.
Note que estaremos recebendo por argumento o controller do input e o método responsável pelo envio da mensagem.

import 'package:flutter/material.dart';
 
class InputMessageWidget extends StatelessWidget {
 const InputMessageWidget({
   Key? key,
   required this.messageEditingController,
   required this.handleSubmit,
 }) : super(key: key);
 
 final TextEditingController messageEditingController;
 final Function(String message) handleSubmit;
 
 @override
 Widget build(BuildContext context) {
   return Container(
     padding: const EdgeInsets.all(8.0),
     child: SizedBox(
       width: double.infinity,
       height: 60,
       child: Row(
         children: [
           Flexible(
               child: TextField(
             keyboardType: TextInputType.text,
             textCapitalization: TextCapitalization.sentences,
             controller: messageEditingController,
             cursorColor: const Color(0xff9b84ec),
             style: const TextStyle(color: Colors.white),
             decoration: const InputDecoration(
               floatingLabelBehavior: FloatingLabelBehavior.never,
               contentPadding: EdgeInsets.all(20.0),
               filled: true,
               fillColor: Color(0xff2f3136),
               labelText: 'Message',
               hintStyle: TextStyle(color: Colors.white),
               labelStyle: TextStyle(color: Colors.white),
               enabledBorder: OutlineInputBorder(
                 borderSide: BorderSide(color: Colors.black26),
                 borderRadius: BorderRadius.all(Radius.circular(60.0)),
               ),
               focusedBorder: OutlineInputBorder(
                 borderSide: BorderSide(color: Color(0xff9b84ec), width: 1),
                 borderRadius: BorderRadius.all(Radius.circular(60.0)),
               ),
               border: OutlineInputBorder(
                 borderSide: BorderSide(color: Colors.green, width: 5),
                 borderRadius: BorderRadius.all(Radius.circular(60.0)),
                 gapPadding: 8.0,
               ),
             ),
           )),
           Container(
             margin: const EdgeInsets.only(left: 4),
             decoration: BoxDecoration(
               color: Colors.green,
               borderRadius: BorderRadius.circular(30),
             ),
             child: IconButton(
               onPressed: () => handleSubmit(messageEditingController.text),
               icon: const Icon(Icons.send_rounded),
               color: Colors.white,
             ),
           ),
         ],
       ),
     ),
   );
 }
}

Com os nossos widgets já escritos, vamos voltar no arquivo chat_screen.dart, terminar de montar a tela e importar os novos widgets.
Para que possamos atualizar as mensagens em tempo real, vamos usar o StreamBuilder, explicarei um pouco mais sobre…
StreamBuilder é um widget que converte um fluxo de objetos em widgets. De forma simples, ele escuta o stream e se constrói em cada novo evento emitido. Os eventos emitidos determinam se o fluxo de dados conseguiu ou não se conectar, se está em espera, se terminou ou se iniciou mas não terminou.
Nosso body vai ficar da seguinte forma:

Stack(
 children: <Widget>[
   Column(
     children: <Widget>[
       Flexible(
         child: StreamBuilder<QuerySnapshot>(
           stream: chatProvider.getMessageList(),
           builder: (BuildContext context,
               AsyncSnapshot<QuerySnapshot> snapshot) {
             if (snapshot.hasData) {
               messageList = snapshot.data!.docs;
 
               if (messageList.isNotEmpty) {
                 return ListView.builder(
                     padding: const EdgeInsets.all(10),
                     itemCount: messageList.length,
                     reverse: true,
                     controller: scrollController,
                     itemBuilder: (context, index) =>
                         _buildItem(index, messageList[index]));
               } else {
                 return const Center(
                   child: Text('Sem mensagens',
                       style: TextStyle(
                         color: Colors.white,
                         fontSize: 20,
                       )),
                 );
               }
             } else {
               return const Center(
                 child: CircularProgressIndicator(
                   color: Colors.blue,
                 ),
               );
             }
           },
         ),
       ),
       InputMessageWidget(
         messageEditingController: messageEditingController,
         handleSubmit: sendMessage,
       ),
     ],
   )
 ],
),

Estamos usando o widget Stack para que possamos empilhar nosso input e o restante das mensagens. Também, fazemos verificações para saber se as mensagens estão carregando e se tem ou não mensagens para que assim o estado da tela mude. Se houver mensagens, obviamente vai mostrá-las, se ainda estiver carregando então mostre um loading e se não possuir mensagem alguma, mostre um aviso que está sem mensagem.
O resultado do chat_screen.dart, será:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
 
import '../models/message_model.dart';
import '../providers/chat_provider.dart';
import '../widgets/input_message.dart';
import '../widgets/message_bubble.dart';
 
class ChatScreen extends StatefulWidget {
 const ChatScreen({Key? key}) : super(key: key);
 
 @override
 State<ChatScreen> createState() => _ChatScreenState();
}
 
class _ChatScreenState extends State<ChatScreen> {
 final ChatProvider chatProvider =
     ChatProvider(firebaseFirestore: FirebaseFirestore.instance);
 
 final TextEditingController messageEditingController =
     TextEditingController();
 
 List<QueryDocumentSnapshot> messageList = [];
 
 final ScrollController scrollController = ScrollController();
 
 currentUser(context) => ModalRoute.of(context)?.settings.arguments as String;
 
 void sendMessage(String message) {
   if (message.isNotEmpty) {
     messageEditingController.clear();
     chatProvider.sendMessage(message.trim(), currentUser(context));
     scrollController.animateTo(0,
         duration: const Duration(milliseconds: 300), curve: Curves.easeOut);
   }
 }
 
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     backgroundColor: const Color(0XFF36393f),
     appBar: AppBar(
       centerTitle: true,
       backgroundColor: const Color(0XFF23272a),
       elevation: 1,
       title: const Text('My.chat', style: TextStyle(fontSize: 16)),
     ),
     body: Stack(
       children: <Widget>[
         Column(
           children: <Widget>[
             Flexible(
               child: StreamBuilder<QuerySnapshot>(
                 stream: chatProvider.getMessageList(),
                 builder: (BuildContext context,
                     AsyncSnapshot<QuerySnapshot> snapshot) {
                   if (snapshot.hasData) {
                     messageList = snapshot.data!.docs;
 
                     if (messageList.isNotEmpty) {
                       return ListView.builder(
                           padding: const EdgeInsets.all(10),
                           itemCount: messageList.length,
                           reverse: true,
                           controller: scrollController,
                           itemBuilder: (context, index) =>
                               _buildItem(index, messageList[index]));
                     } else {
                       return const Center(
                         child: Text('Sem mensagens...',
                             style: TextStyle(
                               color: Colors.white,
                               fontSize: 20,
                             )),
                       );
                     }
                   } else {
                     return const Center(
                       child: CircularProgressIndicator(
                         color: Colors.blue,
                       ),
                     );
                   }
                 },
               ),
             ),
             InputMessageWidget(
               messageEditingController: messageEditingController,
               handleSubmit: sendMessage,
             ),
           ],
         )
       ],
     ),
   );
 }
 
 _buildItem(int index, DocumentSnapshot? documentSnapshot) {
   if (documentSnapshot != null) {
     final chatMessage = MessageModel.fromDocument(documentSnapshot);
     final isMe = chatMessage.author == currentUser(context);
 
     return MessageBubbleWidget(chatMessage: chatMessage, isMe: isMe);
   }
 }
}

Para finalizarmos, precisamos criar as rotas das nossas páginas no arquivo main.dart.
No widget MaterialApp, vamos informar nossas duas rotas no argumento routes e também vamos informar nossa rota inicial em initialRoute, que será “/”.
Nossa classe MyApp ficará assim:

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);
 
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'My.chat',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     initialRoute: '/',
     routes: {
       '/': (context) => EnterRoomScreen(),
       '/chat': (context) => const ChatScreen(),
     },
   );
 }
}

O resultado do arquivo main.dart, será:

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
 
import 'firebase_options.dart';
 
import 'screens/chat_screen.dart';
import 'screens/enter_room_screen.dart';
 
void main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );
 runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);
 
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'My.chat',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     initialRoute: '/',
     routes: {
       '/': (context) => EnterRoomScreen(),
       '/chat': (context) => const ChatScreen(),
     },
   );
 }
}

Rode o projeto e veja o resultado, nosso app parecerá com isto:

Concluindo a criação de um chat usando Flutter e Firebase

O Firebase é uma ótima ferramenta quando precisamos fazer algo rápido e fácil, sem que para isso seja necessário criar todo um projeto backend que levaria algumas horas ou quem sabe dias.
Quando unimos o Flutter e Firebase, conseguimos construir boas ferramentas de forma eficiente e gratuita (até um certo ponto). À medida que sua aplicação cresce, o Firebase começa a cobrar pelas requisições, então recomendo dar uma olhadinha nos preços caso queira começar um projeto grande com ele.
Se você não sabe o que é um widget e como funciona, recomendo dar uma olhadinha neste outro artigo aqui no blog da Taller.