Crie um aplicativo de chat básico usando Flutter e Firebase | Android e iOS | Rahul Agarwal | Skillshare
Pesquisar

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Crie um aplicativo de chat básico usando Flutter e Firebase | Android e iOS

teacher avatar Rahul Agarwal, Flutter Developer & Trainer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução

      0:49

    • 2.

      Crie um novo projeto

      14:01

    • 3.

      Como criar o tela auth

      10:24

    • 4.

      Implemente o Google se login

      14:30

    • 5.

      Verificação de autenticação

      14:03

    • 6.

      Pesquisar UI no usuário

      7:00

    • 7.

      Implemente a função de pesquisa

      12:51

    • 8.

      Como criar bate-papo

      17:40

    • 9.

      Como armazenar mensagens no Firebase

      13:17

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

220

Estudantes

--

Projeto

Sobre este curso

Sem dúvida, aplicativos de chat se tornaram um tema quente da cidade e tem o mundo com tempestade nos últimos anos. Com 2 mil milhões de usuários acessando o mensageiro em uma base mensal e se projetou para gerar a receita de 4.8 bilhões em 2020, é seguro que os aplicativos de is não será lugar em nenhum lugar no futuro. Os usuários ativos de melhores dos aplicativos de top incluindo o WhatsApp, Facebook Messenger e WeChat têm cerca de 4 bilhões.

Agora a pergunta importante é "como você pode desenvolver um aplicativo de chat altamente funcional e quais tecnologias que você pode usar para criar este aplicativo?”.

A resposta simples para essa pergunta é usando o Flutter com Firebase!

O desenvolvimento de aplicativos de flutt foi o mundo pelo stamm em termos de desenvolvimento de aplicativos móveis de plataforma cruzada. Você pode usar isso para criar pixel-perfect perfeitos em pixel, e muitas empresas de desenvolvimento usam o Flutter, a partir de hoje.

Você vai aprender a criar uma versão muito básica do aplicativo de chat para garantir como implementar conceitos do Flutter e Firebase em aplicativos reais.

Passos para desenvolver aplicativo de bate-papo no Flutter no Flutter no Flutter no Firebase com

  • Autorização do Firebase

  • Firebase a

  • Como criar o layout do tela tela de aplicativos de bate-papo

  • Linking final do aplicativo do Chat do Flutter com o Firebase com Firebase

  • Implemente a função de pesquisa

  • de catering para melhorar a experiência do usuário

Conheça seu professor

Teacher Profile Image

Rahul Agarwal

Flutter Developer & Trainer

Professor

Hello, I'm Rahul. I am skilled in building cross platform application using Flutter. I am freelance developer as well as conduct workshops to share my knowledge with the community.

Visualizar o perfil completo

Level: Intermediate

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Se você conhece o básico de Alda Flutter e Firebase, se você almoça sozinho. Então, depois disso, o próximo passo será se candidatar para sua primeira entrevista de emprego. E você tem seu currículo pronto lá que um recrutador irá pedir-lhe para mostrar-lhes alguns projetos práticos como vermelho, porque na base da dívida só eles vão julgar seu conjunto de habilidades. Então, neste curso, você vai aprender a construir um aplicativo de bate-papo básico com Flutter e Firebase como esse back-end. Este curso é para iniciantes que são novos em projetos de aplicação do mundo real. Pessoas que sabem que o básico é uma vibração, mas querem construir algo do zero para praticar o que aprenderam até agora. Espero que você aproveite este curso e consiga o emprego dos seus sonhos na empresa dos seus sonhos. 2. Crie um novo projeto: Olá, bem-vindo a este curso onde vamos construir um aplicativo básico de bate-papo usando Flutter e Firebase. Alguns antes de prosseguir, estou assumindo que você tem conceitos básicos anteriores limpos, como escuro, mais lisonjeado e como implementar a autenticação Firebase e usar o banco de dados Firestore também. Porque neste módulo, vamos falar apenas sobre esses conceitos intermediários porque vamos construir um aplicativo de bate-papo completo. E para isso, você deve ter seu básico lendo. Alguns sem perder mais tempo. Gostaria de começar criando um novo projeto. Então vamos para a pasta. E aqui eu usava a linha de comando e morria Flutter. Criar aplicativo de bate-papo como este. Então isso criará nosso novo projeto mais lisonjeado. Então sim, este é o nosso aplicativo de bate-papo. Agora basta trazer seu VS Code e anexar seu projeto aqui. Ok, está feito. Então remova esse arquivo de teste. Agora, eu não vou apenas ter aprendido no meu emulador agora, eu vou primeiro criar meu projeto Firebase. Então vá para firebase dot google.com e clique em ir para o console. Em seguida, aqui basta clicar em Adicionar projeto e deu-lhe um nome. Vou nomeá-lo aplicativo de bate-papo inundado. Ok. E então continue. Não habilitarei o Google Analytics por enquanto. E, em seguida, clique no botão Criar novo projeto. E então só levará alguns segundos. Veja que meu novo projeto está pronto. Em seguida, clique em Continuar. Então. Aqui estamos navegados para este painel Firebase. Aqui você pode ver as outras opções como o que o armazenamento de banco de dados de indicação hospedando uma coruja. E muito no meio que você pode ver começar adicionando Firebase ao seu aplicativo. Então temos que configurar o Firebase com nossa aplicação flutter. E eu vou configurar uma versão Android. Então, basta clicar no Android. Aqui. Você verá as outras opções que são habilidades tecnológicas. Primeiro é o nome do pacote Android que você pode encontrar. Ao acessar a pasta Android, depois o aplicativo e, em seguida, o código-fonte. Ou você também pode ir para dentro do ID Android é este edifício. E aqui você pode ir e ver esta configuração padrão e seu ID de aplicativo. Este slide, este aqui. Pode dar o nome de qualquer coisa. Eu chamaria de aplicativo de bate-papo. Em seguida, uma vez que estaremos usando a autenticação de login do Google. Então temos que usar nosso certificado de assinatura de depuração para ele. Para obter o certificado de assinatura de depuração, você precisa obter a chave SHA-1 do seu dispositivo. Para isso, basta acrescentar novo diretório, que é o diretório do sistema. Vá para a pasta C. Muito estranho. E escrever arquivos identidades que fizemos dentro de arquivos de programa, você tem que ir para Android, depois Android Studio e JRE, Dann bin. E aqui. Você tem que trazer a linha de comando deles. Agora. Você só tem que colar esta linha de código aqui. Se quiser, basta pausar o vídeo e obter a tecla SHA-1. Depois de digitá-lo e pressione Enter. Você receberá sua chave SHA-1 a partir daqui. Apenas copie. E, em seguida, colá-lo nesta seção de certificado de assinatura de depuração. E, em seguida, clique em Registar. Novamente. Esta chave é usada para ir bem, sign-in phonons indicação para este tipo de fins. Agora, você terá que baixar esse arquivo de configuração. Isso é importante, pois contém as chaves APA e as informações críticas para o Firebase usar. Basta baixá-lo e, em seguida, ir para essa pasta pesos que estão sendo baixados. Corte de lá. Agora, em sua pasta android projeto flutter CO2, em seguida, dentro da pasta do aplicativo, e aqui cole o seu services.js corno e arquivamento. Em seguida, basta clicar em Avançar. Agora temos que fazer algumas configurações do Firebase em nosso Projeto Florida. Copie esta linha de parte de classe de código. E na sua pasta andróide, temos um arquivo de Gradle dentro dele que só isso aqui. Em seguida, dentro da pasta Android e, em seguida, dentro da pasta do aplicativo temos outro arquivo onde temos que pagar esta linha de código. Vamos para aqui. Você pode ver aqui, colá-lo aqui, e, em seguida, copiar este, aplicar plugin e colá-lo no final. Além disso, uma coisa que você tem que fazer é aqui, multi ydx dy, dx habilitado para este código é necessário quando estamos lidando com Firebase. Então você tem que se lembrar disso, sempre. Em seguida, basta clicar em Avançar e, em seguida, clicar em Continuar para o console. Estamos navegados para o console Firebase. E aqui nosso aplicativo Android está pronto para funcionar. Agora, antes de executar nosso aplicativo no emulador, temos que fazer algumas configurações aqui. Então, basta colocar dois pontos principais, ponto arquivo e aqui fazer a função principal como uma pia. E depois à direita, dendrite esta linha de código. Primeiro, encadernação de dados rígida e curta inicializada. Então você tem que escrever esta linha de código. Está levando algum tempo para sua ligação que garantem inicializar isso e, em seguida, simplesmente iterar ponto firebase. Nós temos que primeiro importar Firebase também. Mas como você pode ver, antes de importar Firebase, temos que escrever que dependências spec dot arquivo YAML. Então, para isso, o custo para acessar qualquer pacote externo, nosso recurso, temos que usar dependências. Então primeiro foi chamado, segundo foi Firebase. E então, já que realmente usamos o login do Google via, vamos usar essa perna em Israel. E a última coisa é a nuvem Firestore. Portanto, estes são os pacotes necessários. Basta copiar este pacote, ir para o arquivo e colá-lo aqui. Em seguida, copie, cole-o e, em seguida, faça login no Google, copie e cole. E, finalmente, nosso Cloud Firestore. Essas dependências são necessárias. E todos esses plugins de fibras são chamados coletivamente Flutter fire. Você pode apenas pesquisar este termo e você vai encontrar todas essas dependências. Agora vá para o arquivo ponto principal. E vamos escrever, vamos inicializar nossa base de fogo. E aqui temos comércio à espera. Firebase dot inicializar que ele em que as configurações são feitas corretamente. Agora, se você quiser, podemos apenas, nós podemos apenas executar o aplicativo no emulador e também certificar-se de que você ativar o login do Google. Portanto, configure o login no Google. E aqui, nesse terceiro, você tem isso desabilitado, basta ativá-lo. E eu salvaria. Agora o login no Google está sendo ativado. Da mesma forma, você deve habilitá-lo via Google, Firestore também. Então, aqui, basta clicar em Criar banco de dados e, em seguida, escolher, escolher um local e você fazê-lo em que testemunho e alfabeto, você será enviado para esta nuvem Firestore console Israel. Então é isso para este vídeo. Certifique-se de começar a depurar porque uma vez que vai demorar algum tempo, eu gostaria de parar o vídeo aqui para que ele não perca nosso tempo e podemos continuar no próximo vídeo. Obrigado. 3. Como criar o tela auth: Oi. Nesta sessão, vamos construir tela de autenticação. Porque antes de entrar nas casas limpas são a tela de bate-papo definitivamente o usuário tem que criar uma conta. Até agora que vamos criar uma pasta dentro da nossa ponta e nomeá-lo telas. E dentro disso, crie o arquivo chamado ARP, baço ponto-ponto, assim. Então, como geralmente placa Material. E, em seguida, vamos criar um estado para login e nomear andaime. Desde então Vardy, eu teria saqueado. E então dentro dessa criança, vamos ter uma coluna. Então o que eu estou simplesmente planejando fazer é criar que este primeiro dedo será um logotipo. Que, em seguida, depois, haverá o nome do aplicativo e, em seguida, um botão chamado assinatura com o Google. Dito isto, é por isso que os estou a usar. Usando esta coluna dentro da coelom. Vamos pegar um contêiner. As redes de contêiner têm uma decoração de caixa de decoração. Dentro dele. Eu gostaria de ver a imagem de colisão de imagem. E agora dentro disso, a imagem de colisão quando dado widget de imagem de rede. Então você pode simplesmente abrir seu navegador. Você pode conversar, logotipo de bate-papo, suponha ícone de bate-papo, assim. Você pode apenas, e então haverá muitas opções. Você pode escolher o que quiser. O que vou fazer é esperar, deixe-me ver se consigo o que quero. Então eu vou apenas usar o meu próprio, que eu já usei antes. Você pode simplesmente clicar com o botão direito do mouse e clicar em Copiar vestido imediato e colá-lo aqui. Torne isto simples assim. Então é a tela de arte. Vamos para o principal. Jack. Seguimos o código anterior. No lar. Tornar a tela ímpar é a tela inicial como esta. E então vamos ver. Está mostrando imagens ou algum erro? Existe? É verificar isso. Acho que sim. O que posso fazer é supor que se eu der expandido, então vamos ver o que acontece. Vês, porque obviamente devias dar alguma altura a este contentor. Então eu dei meios expandidos, tomar todo o espaço disponível dentro desta coluna. Então esse é o significado lambda. Após este widget expandido. E teremos uma mensagem e inundaremos o barracão. E vamos dar um pouco de estilo. Tamanho estrangeiro, 36, peso da fonte, peso da fonte, negrito. Vamos guardá-lo e ver. Desde que eu tenho usado expandido, por isso tem apenas empurrado para o fundo e investigar sobre o espaço aqui. Depois disso, precisamos criar uma assinatura com o botão Google. Vamos fazer isso. Não vamos ter aliviado. Mas, em seguida, viscerally padrão agora em apenas para a interface do usuário. E dentro dessa criança, vamos criar um papel para que eles possam ser imagens, bem como texto. Vamos fazer com que o principal exista. Refiro-me àquele centro e àquelas crianças. A primeira coisa que eu preciso é de imagens não de rede, e depois obter um logotipo do Google. Eu iria apenas copiar minha própria imagem, mas você pode apenas ir para o Chrome como geralmente procurar imagem e copiar seu endereço e colá-lo aqui assim. E a esta imagem, vamos dar-lhe uma altura. Altura de 36. Em terceiro lugar, esta imagem nessa linha, teremos um tamanho de 10 para que haja algum espaçamento entre seu logotipo. Essa é a imagem e o texto é o texto. E X estará assinando com glicose. Vamos dar algum estilo, estilo básico como sempre. Então. Teremos um tamanho de fonte de fazer D. E isso disse, vamos salvar e verificar. Qual é a saída? Veja, nós temos este logotipo e nós temos este botão. A primeira coisa, eu daria um pouco de estofamento para este botão. Vamos e, em seguida, envolvê-lo com Berlim e dar adição não simétrica. E depois horizontalmente. Então qual decalque, vívido dois em D. Vamos ver. Bonito, pelo menos decente. Então o que vou fazer é com este botão. Aqui, vou dar um pouco de estilo para esse botão. Estilo. Mas então estilo. Desculpe, deveria ser apenas Merton obsoleto assim. E então dentro dele já deu cor de fundo, meu estado colocou o ponto, então o menos preto e, em seguida, algum preenchimento. Então mais roupa de cama pode dizer. Vamos verificar porque o preenchimento precisava ter certeza de que o botão não está. Mas não vamos tão estreito, então vamos dar um pouco de estofamento também. Propriedade de estado ADA atendida em inserções de borda, não simétrica. E, em seguida, apenas a vertical. Vamos dar 12. Vamos verificar C. Agora, esta tela inicial, desculpe, a tela estranha está perfeitamente boa. E só mais uma vez estou expandido por causa disso expandido que tomou são menos espaço até aqui. E, em seguida, os outros widgets, isso significa que o texto e o botão são empurrados para baixo. Então, sim, é isso para esta tela de autenticação. No próximo vídeo, implementaremos a funcionalidade de login do Google. 4. Implemente o Google se login: Agora a parte da interface do usuário está concluída. É hora de trabalharmos na funcionalidade de assinatura do Taco Bell. Até agora que no arquivo de artes verdes, eu simplesmente vou no topo. E a primeira coisa, eu criaria uma instância de assinatura do Google. Então, será assinado corno é igual a assinar assim. E depois, eu criaria uma instância caso Firebase por uma loja que é o primeiro ao banco de dados também. Porque eu iria armazenar os dados do usuário no Firestore também. São todos os dados de autenticação. Então, depois disso, vamos criar nosso nome de função futura é função de assinatura. Será um sinc. E este é o procedimento que é, este código é corrigido para a calcinação. Aguarde. Vá calcinar o sinal de ponto. Então, isso irá aparecer menu. Você pode escolher sua conta. Você pode clicar no botão Voltar, e essa corrente será nula. Nesse caso, eu fiz essa verificação para que, se o usuário clicar em entrar com Google, mas não escolher nenhuma conta e voltar diretamente, o código abaixo não será executado. Depois disto. Vamos um 10 decaído. Google é igual a esperar, vai usar ponto-ponto decaído como este. Então deixe-me obter o token de acesso que eu preciso para controlá-lo. E então é assim que nossa credencial. E eu vou para o provedor. Credenciamento. Aqui. Ele aceita token de acesso e vinculará o Google Art. Faça você sorrir. Irá acessar token e , em seguida, o token ID no token ID cookie. Então o que temos que fazer. Agora temos que usar a instância de arte Firebase também. Então eu vou simplesmente escrever credencial de usuário. O usuário pode então compartilhar é igual a aguardar. Instância de ponto do Firebase. Eu criei a instância aqui apenas, mas assinando com credencial. E você tem que passar a credencial. Palavras tão simples, este código era necessário para obter autenticação ou as credenciais do Google. E depois disso, usaremos essa linha de código para que nossa própria autenticação Firebase possa acessar essa conta e armazenar as informações. Agora temos feito login com sucesso. Mas o que eu quero fazer é criar ou salvar esses dados, o banco de dados Firestore também. Então você pode simplesmente escrever uma coleção de lojas de peso. Eu criaria uma coleção chamada Users dot DOCX. ID do documento pode ser credenciais do usuário ponto UID. E está mostrando isso porque não pode ser deixado Nelson usando esta exclamação e assegurando que não será nula. E então este método definido. Vamos fazer isso. A primeira coisa que eu armazenaria é esse e-mail, simplesmente credenciais de usuário tardio, e-mail de usuário. E como sempre, você tem que usar isso. Então eu escreveria nome, credencial de usuário. O usuário. Nome de exibição do ponto. Então eu salvaria essa imagem. E usuários canadenses imediatos usuário ponto credencial usuário. Para um URL. Então será UID. Uid será UID de usuário de credencial de usuário. E a última data em que essa conta foi criada? A data, a hora. Mas agora temos nossa função pronta. Vamos experimentá-lo. Mas primeiro, certifique-se de que chamamos esta função em nosso botão on press. Então simplesmente escreva nesta pia e aguarde função de assinatura como esta. Então esta função foi chamada. Agora vamos verificar se está funcionando ou não. Temos nossa base pronta. Agora, se eu clicar sobre ele, ele pode me perguntar se ele pode ele vai diretamente sim, Ele me pediu. Então eu vou clicar em Minha conta. E, obviamente, neste momento, não estamos a ser navegados a lado nenhum. Mas vamos verificar se ele foi salvo ou não. Veja, isso foi salvo. E no meu banco de dados Firestore. Aqui também, os dados foram salvos corretamente. O nome da imagem de e-mail UID, e agora tudo está funcionando bem. Apenas uma coisa, uma coisa eu tenho que ter certeza de que suponha que o usuário logout e, em seguida, ele, se ele clicar em assinar com o Google novamente, então esses dados serão atualizados novamente em que é acionado para o banco de dados, que simplesmente significa, suponha ao usar o aplicativo de bate-papo, o usuário altera a imagem. Neste, em nossa aplicação de inundação, que é a imagem. Mas se ele sair e clicar em entrar com o Google novamente, então novamente, esta imagem será alterada para a imagem padrão de qual conta do Google para ser porque não fizemos nenhuma verificação. Então, a primeira coisa que eu faria isso verificar que documentos instantâneo será tipo de dados e escrever usuário existir, que implementa se o usuário existir no banco de dados. Eu teria tido usuários de coleção. Mas doc e documento ID será usuário credencial ponto usuário ponto, ponto UID obter assim. E este UID deve ser certificar-se de que não é nulo. Agora, isso irá para este arquivo armazenado aqui, verifique se o usuário já se registrou ou não anteriormente. Então, depois disso, podemos simplesmente fazer um “se”, verificar. Se o usuário existir, ponto existe. Se o usuário existe, então podemos simplesmente imprimir para a nossa depuração que usuário já existe na base. Mas se não esse material pela primeira vez para este usuário, então podemos criar uma nova entrada em nosso Firestore. Então essa coisa era muito importante. Agora suponha que se eu clicar no login com o Google, novamente, ver usuário já existe no banco de dados. Portanto, pelo menos os dados anteriores não estão sendo atualizados. Nosso empurrado com força para o mesmo ID de documento. Agora, temos nosso login no Google funcionando perfeitamente. Mas depois que o usuário entra, temos que ter certeza de que navegamos para a tela inicial e também não podemos comer, em seguida, de volta para a nossa tela até que nós sair manualmente. Então temos que verificar o estado estranho da base de fogo. Mas antes disso. Vamos criar um arquivo dentro do diretório de telas e nomeá-lo tela inicial. Ponto, ponto. Como este. Sim, vamos importar o nosso pacote de material. Vamos obter este estado livre de login. Nomeie a tela inicial. E removeremos o construtor padrão. Então temos esta queda. Agora, no bar AB. Vamos simplesmente fazer isso de texto. Então centralize isso. Em seguida, a cor de fundo deve escolher cores começar. Ok? E aqui eu teria um botão que é para o botão de logout. E dê o suficiente. E depois da barra AB, eu daria um botão de ação flutuante. E depois da barra AB, Na nossa tela inicial. Botão de ação flutuante. Então, naquela criança, eu escreveria, eu posso, eu posso começar a procurar. Então, por que eu fiz isso, eu vou explicar. Deixe-nos criar o CUI primeiro. Agora temos essa interface do usuário. Vamos para o ponto principal. E apenas para testes, vamos ver como essa interface do usuário se parece. Agora eu recomeço. E vamos verificar. Veja, esta é a tela inicial do nosso aplicativo de mensagens. Então eu tenho esta árvore de pesquisa, botão de pesquisa para que o usuário possa procurar seus amigos neste aplicativo e enviá-los de lá diretamente. Esse é o único propósito, o propósito deste botão. E no corpo que teremos em que chats que o usuário tem falado. Mas é, ele vai estar no vídeo mais tarde porque agora, pelo menos ele tem que começar uma conversa com alguém. Então é isso. Eu faria com que fosse a tela estranha novamente. Agora, imagine que eu registrei o aplicativo, mas realmente eu já fiz login, mas não estamos navegando para a tela inicial porque não estamos verificando o estado de autenticação do Firebase. Então, no próximo vídeo, vamos fazer isso exatamente. Isso é tudo por esta sessão. Obrigado. 5. Verificação de autenticação: Oi. Agora, para verificar as autenticações, Estado v tem que usar esse método de usuário atual fornecido pelo Firebase. E, consequentemente, mostraremos essa tela se o usuário entrou ou não. E vamos para o arquivo main.js aqui. Primeira coisa, eu criaria a função futura, que nos dará uma virgem. Eu usaria conectado. No entanto, vou verificar se o usuário já entrou. que podemos fazer é chamando firebase dot instância dot CurrentUser, simples assim. Então eu iria verificar se o usuário não é igual a nulo. Em seguida, volte a tela inicial. Se for nulo, ou seja, EA não está conectada agora. Em seguida, tela de arte feito, digamos. Então esta é a função necessária. Agora vamos implementado na propriedade home do nosso widget. Basta usar o futuro Winder. E aqui, o futuro será o usuário conectado. E esse construtor geralmente nos dará contexto. E vendo instantâneo. Neste, ele nos retornará um widget, como você sabe a partir da função. Agora, vamos simplesmente verificar se o snapshot tem dados. Retornar dados de snapshot. Isso significa simplesmente que eles tendem a ter visitado. E temos que nos certificar de dar essas exclamações para que não seja nenhum. E nós estamos liderando notado um que fizemos será pelo menos eles estão escolhendo em casa ou tela de dúvida. Portanto, não pode ser nulo. E se, se não for, então vou mostrar um indicador de progresso circular. E então HF e Janice executando. Agora vamos salvar isso e verificar se estou navegando diretamente para a tela inicial. Veja, agora, se eu reiniciar meu aplicativo, eu vou ser navegado na tela inicial até e a menos que eu clique sobre isso, isso significa botão lava, que não está funcionando agora, mas devemos clicar sobre ele e então só devemos voltar para a tela de login. Agora, uma vez que temos os dados do usuário provenientes dos incêndios, que são esses dados, obviamente estaremos usando e compartilhando esses dados através do aplicativo. E será no formato JSON. É por 10. Criamos nossa própria classe de modelo para esses dados. Então vamos criar uma nova pasta dentro lib e nomeá-lo modelo de usuário dot, dot. Então estude. Deve ser nomeado modelos. E dentro dele, devemos obter um arquivo chamado User model dot dot. Vamos começar a criar nossa classe modelo. Eu daria um nome, usaria um modelo. Agora. Ele terá agora valores desta classe, que são esses dados. Então vamos começar com corda. Nome da string, string, imagem, timestamp, que é do Firebase. Podemos namorar. Em seguida, string UUID. Vamos criar um construtor que é necessário. Isso exigiu isso.name obrigatório, esta imagem exigiu isso. E, em seguida, de forma semelhante este ponto UID. Então, temos nosso modelo pronto, mas como você também sabe que obter nossas funções para serializar e desserializar nossos dados JSON. E geralmente esse ponto de chamada da JSON. E todo esse conceito é o conceito básico de mais tarde os modelos. Então, eu espero que você saiba que este conceito de Berlim vai apenas dizer UserModel ponto de JSON eu estou nomeando. Ele aceitará documentos instantâneo. Snapshot. Então, o que é este documento navio instantâneo. Esses dados estão chamando o instantâneo do documento. Agora eu simplesmente giraria um modelo de usuário. Agora, vamos começar com a média será imagem instantânea. Então vamos copiá-lo. Set pode realmente ser o nome. E depois o nome. Obviamente você pode. Eu não fiz nenhuma ordem. Eu só gosto de ter este pedido. Da mesma maneira. Parece bom. A data e, em seguida, o UID será ID. Então, estes não são nada mais que essas chaves na imagem e todas essas chaves. Agora vamos nos certificar de que enviamos esta classe UserModel enquanto navega para a tela inicial para que esses dados possam ser usados para aplicação. Mas primeiro, vamos converter o usuário do Firebase para o nosso modelo de usuário, ponto ponto principal Hutu. Então aqui temos este login do usuário e esse tipo de dados do usuário que está vindo do Firebase. Então, dentro dessa declaração se, Eu vou simplesmente escrever documentos instantâneo. Usando dados. Para o Firebase, usuários da coleção de pontos da instância do Firestore. Então simplesmente com esse documento ID de uci.edu AD, eu vou obter esses dados dos incêndios, que são esses dados. Anteriormente, tínhamos esses dados, que são os dados do usuário. A partir disso, vou buscar o Firestone e depois simplesmente convertê-lo para o nosso próprio modelo de vidro. E use modelos usando model.fit alguns JSON e envie esses dados do usuário, que é um instantâneo de documento. E dentro desta tela inicial, eu gostaria de enviá-la ao navegar. Então, dentro da tela inicial, devemos ter certeza de que estamos aceitando como módulo de usuário. Em seguida, usuário, e nós apenas nomeá-lo simplesmente usuário. E então, através desse construtor, eu estou aceitando. Então o erro será feito. Agora, quando entramos com o Google, temos sido navegar para a tela inicial. E para isso, eu usaria isso a minha média e que é que eu não vou enviá-lo diretamente para a tela inicial. Eu simplesmente enviá-lo para o meu aplicativo para que ele vai novamente verificar e buscar dados da loja de arquivos e, em seguida, criar um modelo ou então nós temos que fazê-lo. Novamente. O que quero dizer com isso é vamos para a tela ímpar ponto, ponto. E não tínhamos fundos de inscrição para atribuir crianças. E no final, eu apenas escreveria Navigator, o empurrar e remover até então aqui. Dentro dessa nova rota. Se eu escrever material página rota Bender e contatos, e se eu escrever se eu escrever home chooling, ver se eu adicionar homeschooling, então eu tenho que enviar o usuário, que é o modelo do usuário. Tanta coisa eu tenho que fazer. Mas se eu escrever simplesmente myapp, assim, se eu simplesmente escrever meu aplicativo. Por isso, normalmente irá para esta tela novamente. Em seguida, ele vai mostrar um indicador de usuário e ele vai obter os dados do armazenamento de arquivos e convertido e, em última análise, enviá-lo para a tela inicial. Portanto, esta é uma abordagem muito melhor. Não precisamos escrever o código de novo e de novo. Então vamos verificar se reiniciei. Vamos ver. Obviamente eu não posso verificar faz login porque nós já efetuamos login. Então, vamos pelo menos criar e fazer uso deste botão de logout. Para isso, basta ir para a tela inicial. E aqui eu nos faria pensar, desculpe, não essa busca para este botão de ícone. Aguarde assíncrono é ahd dot instância ponto ponto sair. E então eu faria um navegador. Mas empurre e remova. Até agora, eu posso simplesmente escrever meu aplicativo em nossa tela você é porque como sabemos que ele não é autenticado e ele tem que ir e entrar novamente. E a aspirina não está pedindo nada como parâmetro. Então é, não faz nenhuma diferença. Vamos ver. Agora, se eu clicar nele, ver que eu estive assinando, fui navegado para a tela de arte. E agora, se eu clicar em fazer login com o Google, vamos ver o que acontece. E, em seguida, o indicador de carregamento irá mostrar e o medicamente eu fui enviado para a tela inicial. Então é assim que o Estado funciona. Isso significa como estou utilizando o estado ímpar e certifique-se de que usuário faça login automaticamente e, em seguida, faça logout também. Então isso é tudo por este vídeo. Na próxima sessão, trabalharíamos neste botão de pesquisa para que o usuário tenha a capacidade de pesquisar seus amigos neste aplicativo de bate-papo. Obrigado. 6. Pesquisar UI no usuário: Bem-vinda. Nesta sessão, vamos simplesmente criar uma tela de pesquisa para este botão para que sempre que um usuário clicar nele, ele deve navegar para uma tela onde ele deve ser capaz de procurar por seus amigos. Vamos simplesmente jogar uma nova tela. E quero dizer que procuramos ponto na tela. Vamos importar nosso pacote de material. Torná-lo uma região sensacional. E eu procuro na tela. E como eu fiz com a tela inicial, navegando para esta tela também, nós exigiríamos essa classe modelo que este usuário UserModel. E vamos tê-lo naquele construtor. E depois devolva um andaime. Isso não tem AB bar classificado título de pesquisa seu amigo. E então, no corpo, o que estou planejando é que a primeira região será apenas um texto. Nós vamos qualquer botão de pesquisa, qualquer que o usuário clique nele. E depois que ele clica no botão de pesquisa, então apenas a função deve executar, o que faremos nesse pequeno vídeo. Mas agora, apenas a posição dos EUA, eu precisaria de uma coluna. Em seguida, crianças, e como eu disse, eu vou estar usando campo de texto. Então nós declaramos o texto editando-os mais alto porque controlador de busca e ele não os controlava assim. E dentro deste, Vamos começar com a linha, o primeiro elemento que eu quero a linha porque eu quero os widgets Botha, widgets da mesma maneira horizontal. Então vamos ter filhos. Em seguida, um campo de texto que controlador seria pesquisado controlador e decoração. Vamos dar decoração de entrada. Texto com o nome de usuário. E a fronteira seria delineada na borda da bota. E dentro dela, vamos dar-lhe um raio de fronteira. Raio de fronteira, não circular. Dê-lhe 10. Então vamos dar uma olhada. Mas antes disso, temos que ter certeza de navegar no botão que está usando a disfunção e ir para a tela inicial. E aqui no local, basta escrever o push do ponto do navegador. Em seguida, o layout da minha página, contexto, a tela anterior. E temos que enviar o usuário e que é rígido, que está aqui. E vamos salvá-lo. Se eu clicar nele. O que eu tenho é que fiz algo errado, já que era na segunda fila, coluna de sangramento. Então, a primeira coisa, eu daria a ele embrulhar essa coisa com um widget de preenchimento e dar roupa de cama ou 15, e depois embrulhá-lo adicionando widget. Em seguida, expandimos. Isso significa tomar todo o espaço. Rápida. Dentro ligado não envoltório. Escreverei sua faca expandida. Eu economizo porque é idiota seus DevOps como qual deve ser o tamanho disso? E eles fizeram algo errado nesta coluna, não deveria estar lá. E remova este widget. Isso significa que temos um problema dentro dele. Temos uma fileira dentro dela. Agora temos isso expandido e tudo mais. Vamos verificar isso. Acho que por causa daquele editor extra da Columbia estava lá. Agora, se eu clicar nele, ver que temos nosso quadro de texto com isso adicionando outro não expandido para que eles tenham menos espaço aqui. Agora, após este widget expandido dentro da linha, vou dar um botão ícone. E vamos dar o ícone para ser ícones re.search. Então é isso. Vamos verificar isso. Veja, ele está olhando para a pia. Pelo menos sabemos que temos que digitar aqui e depois clicar nele. E depois disso, os resultados serão mostrados aqui e que faremos no próximo vídeo. Então é isso. Nós construímos com sucesso. 7. Implemente a função de pesquisa: Então, nesta sessão, vamos trabalhar nessa funcionalidade de pesquisa. Então temos esse campo de texto e um botão realmente louco quando digitamos um nome de usuário, então os dados devem ser mostrados nesse corpo, que é do Firestone. Então, antes de seguir em frente, vamos para a tela inicial. Só quero escrever uma linha de código. Quando estamos enviando. Deveríamos escrever isso também. Esse é o Google. Iniciar sessão no Google, iniciar sessão, terminar sessão. Então temos que usar essa linha de código para sair. Porque se não usarmos o login do Google, sair, então não poderemos fazer login porque conta diferente o tempo todo, apenas uma conta que poderemos usar. Mas é por isso que temos de nos certificar de que escrevemos esta linha de código. Excelente. Vamos para a tela de pesquisa novamente e começar a trabalhar nisso. Eu criaria algumas variáveis, que serão uma lista contendo mapas. E eu chamaria de resultado da pesquisa. Estará vazia logo no início. E um valor booleano de carregamento. Só para ter certeza de quando estamos buscando dados. Podemos mostrar indicador de carregamento na interface do usuário. E essa lista de coisas mapa não é nada, mas quando procuramos usuários e os dados estão chegando, isto é, esses dados estão vindo da tempestade de fogo. Ele estará no formato JSON, que é o formato de mapa. E guardarei Alda, todos esses mapas nesta lista. Isso é supor que Directory usa, em seguida, haverá três mapeamento ele. E uma vez que é uma lista, vou usar um construtor de exibição de lista para produzir todos os usuários no corpo. Então vamos trabalhar na função de pesquisa. Temos que escrever em busca assim. Eu daria um nome na busca. Em seguida, comece com o nosso Firestore que este Firebase dispara instância de plugin loja essa coleção. E aqui eu iria para os usuários e usar uma cláusula where para que eu possa filtrar e obter o nome exato que é qualquer nome de usuário que queremos pesquisar. Podemos acabar com esse dia. Lee será armazenado no controlador de busca e então eu vou apenas escrever ponto get. Então, agora, depois disso, eu vou usá-lo então cláusula. Assim que obtivermos os documentos que estão aqui, lista de documentos. Vamos verificar se está vazio ou não. Ou seja, o que quer que o usuário tenha procurado. Será que ele existe? Então eu posso fazer isso apenas usando o comprimento. E se for inferior a 0, podemos mostrar um andaime, não andaime para que possamos, assim como lanchonete mostra lanchonete e, em seguida, um sniper. E podemos escrever o conteúdo como nenhum usuário encontrado. Dito isso. E também como eu disse, estou usando este indicador de carga. Então aqui, assim que clicarmos na tela de pesquisa que está em busca, eu escreveria o indicador de carregamento do meio como verdadeiro. E se for nulo, isto é, não há dados, então eu vou novamente torná-lo falso. E depois regressa daqui. Ou seja, não precisamos executar aspas duplas se não houver nenhum usuário disponível. Mas se tivermos uma lista de usuários, então vamos usar essa variável de valor. Em seguida, todos os documentos. E então eu vou fazer um loop através dele. E nos dará detalhes de um usuário em particular. E simplesmente, simplesmente, eu escreveria o resultado da pesquisa, que é essa variável. Dot add e dados do usuário como este. Também. Eu não quero que o usuário possa procurar sozinho. Ou seja, suponha que ele tenha o nome de John. E se escrevermos John, não quero isso no resultado da pesquisa. Ele poderia vê-lo celular porque então ele estaria apenas enviando mensagens para si mesmo. Então, para ter certeza de que não é lá que o usuário que está pesquisando não está vindo. Podemos apenas escrever dados não é igual a ponto rígido user.email, que é o usuário atual. Se eles não são iguais, então podemos usar e se eles são iguais, então isso não seria armazenado nesta variável lista. E depois disso, vou usar novamente este estado conjunto é chamado de falso. Também o que eles querem é quando clicamos assim na função de pesquisa, em seguida, ele se certifica de que faz pesquisa variável resultado está vazio. Porque podemos procurar várias vezes. Suponha que uma vez que usa tal que você, todos os detalhes serão armazenados nesta variável. Mas se ele digitar outro nome , os resultados da pesquisa devem estar vazios. Como isso. A função está pronta. Vamos trabalhar na parte do corpo que está dentro dessas crianças. Nós temos essa fila. E depois da linha, usarei uma cláusula if. Ou seja, se o comprimento do ponto do resultado da pesquisa for maior que 0, ou seja, se alguns dados estiverem lá. E se não, vou escrever como se o carregamento é igual a verdadeiro. Em seguida, mostre uma largura rígida central, indicador de progresso circular. E vamos trabalhar agora. Se a pesquisa não for o ponto, o comprimento é maior que 0. Vamos começar com uma região expandida. Uma vez que estamos usando um construtor ListView. Então temos que usar expandido para que ele vai levar todo o espaço e uma vez que será rolável também. Assim, na contagem de itens irá simplesmente escrever o resultado da pesquisa. Mas terra, vamos escrever psiquiatra, agarrar através. Então eles tomam o banco de dados é necessário. Então, abaixo, temos contexto e índice. E então eu simplesmente retornarei um estilo de lista. Eu teria feito uma lista com liderança, como eu disse. E a criança será imagem.Todos índice de pesquisa de rede. E então essa propriedade de imagem como esta. Da mesma forma no título, eu escreveria nome, que é resultado da pesquisa, índice e, em seguida, nome. Nesse subtítulo, eu escreveria como massa de pão, e-mail, índice, e-mail. E então nessa trilha, eu daria a ele um botão de ícone. Isto vai estar vazio por enquanto. E eu serei ícones de ícone. Mensagem. Eu posso, eu posso começar a mensagem. Perna isto. Vamos salvá-lo. Mas como temos apenas um usuário, não vai funcionar. Vamos sair e assinar com uma conta diferente. Então, temos vários, pelo menos dois usuários em nossa aplicação. Agora, se eu for para a tela de busca e vamos ver, ele vem? Desculpa, esqueci-me de atribuir esta função. Essa é a função para o botão do ícone. Procure, assim, então só funcionará. - Obviamente. Vamos testar de novo. Com esta nova conta. Eu procuraria pode ser conta VS. E clique em pesquisar e ver. Está a funcionar tão perfeitamente. E se eu tiver algo como John que não está lá, e se eu clicar nele, então imagine, se eu clicar sobre isso, se eu clicar sobre isso, então nenhuma fonte de usuário e os dados anteriores serão removidos desde que eu me certifiquei de que o resultado da pesquisa fica Vazio. Por causa disso ao vivo. Então é isso para este vídeo. No próximo vídeo, vamos trabalhar neste ícone de chat que é para que quando pesquisamos um usuário e eles o usam apareça, então podemos enviar-lhe uma mensagem com este ícone e haverá tela de bate-papo. Vejo vocês no próximo vídeo. 8. Como criar bate-papo: Vamos começar a trabalhar na tela de bate-papo. Então, crie um novo arquivo dentro da árvore estática da tela e nomeie-o. Tela de sombra, ponto-ponto, assim. E aqui, vamos importar material e, em seguida, tornar a propriedade de TI menos rígida tela de bate-papo. Vou remover este construtor padrão. Porque agora basta imaginar quando temos uma tela de bate-papo, pelo menos devemos saber quem é o remetente e o receptor. Esse é quem é, na verdade, o usuário atual e a pessoa com quem ele está falando. Até agora que temos que ler requer alguns parâmetros são alguns dados nesta tela de bate-papo. Primeiro será o modelo do usuário. Esse é o usuário atual que está enviando mensagens. A primeira coisa é isto. Em seguida, segundo é o ID amigo, que é para quem está falando, precisamos ID de usuário, que é ID exclusivo. Então precisamos de um nome de amigo. E então precisamos da corda final. Imagem de amigo. É por isso que eu preciso desse nome e imagem de amigo só para mostrar esses dados. Mas isso é muito alto se você usou o WhatsApp deles e você sabe do que estou falando? Está no topo e a imagem estará lá e o nome dessa pessoa será feito. Agora, vamos criar um construtor. E exceto que é ler todos os dados, tem o usuário final ponto, ponto, nome, esta imagem de amigo, assim. E, em seguida, nessa função de conta, digamos feito um andaime na barra de aplicativos. Vamos dar que a cor de fundo é o campo de início da cor. E então esse título, Vou usar uma linha para que possamos produzir vários widgets juntos. Em primeiro lugar, widget será a imagem e eu faria circular usando clipe rect. Borda rígida. Dds é igual ao raio ponto circular assim. E então nessa imagem de amigo image.net criança, essa é a corda e dar-lhe uma altura de 35. Em seguida, ele usa caixa de tamanho com cinco apenas para dar algum espaçamento e, em seguida, texto. Aquela pessoa com quem ele está falando hoje, usuário atual está falando e deu um tamanho diferente. Então não para navegar para esta página. Temos que ir para a tela de busca. E, em seguida, neste estilo, temos este botão ícone. E aqui nós navegávamos, que é navegador, ponto push, material, rota da página, contexto. E estamos enviando para a tela de bate-papo, que requer todos esses dados. Vamos escrever um por um. usuário atual será rígido. Usuário de ponto, que já estamos aceitando para esta tela. ID amigo não será nada, mas este índice que o índice de pesquisa e aqui você AD. Da mesma forma, o nome será o nome e a imagem será esta variável de imagem. E também enquanto navega, eu só quero definir o estado e tornar o controlador de pesquisa vazio. Eu só queria quando ele retorna, que é quando ele clica no botão Voltar, então ele pode procurar outro usuário, se ele quiser. É isso. Então vamos testar isso. Agora, se eu clicar no botão Pesquisar, novamente, procure um usuário. Então, se eu clicar neste chat, eu posso agora ver que este é layout é semelhante ao que sete você pode apenas dizer. Mas temos a imagem e temos feito dentro. E lembre-se, estou enviando a imagem e nomeada através do construtor que para que pareça tão rápido. Se eu tivesse usado, novamente, seu futuro vai aprender lá e depois buscar tudo. Uma experiência não seria tão grande. Agora, nesta tela de bate-papo, Vamos criar um campo de texto aqui e um botão Enviar para que o usuário possa pelo menos estipend enviar-lhes mensagens. Então, dentro da tela de bate-papo, depois do bar, vamos para o corpo. E a primeira coisa que eu usaria um widget expandido. Então campo de texto de dados levaria espaço Alda, em seguida, um recipiente. E aqui estou eu construindo assim. Você só vai entender porque isso expandido é diferente, desculpe. Vou explicar uma reunião. Vamos primeiro anotar e inserir. Então. Em seguida, decoração, decoração de caixa, cor , branco, fronteira ADS, fronteira raio. Somente. Esquerda. Vamos dar o raio circular 25. E certo, Vamos novamente deu raio circular 25. E por enquanto, esta, aquela criança dentro dela, vamos deixá-la como um recipiente vazio e trabalharemos nela depois de algum tempo. E só quero te mostrar isso aqui. Este widget expandido vai ocupar todo o espaço aqui. Esses são os nossos chats principais serão mostrados aqui mais tarde. E no final, teremos nosso campo de texto. E eu gostaria de separar esse código, uma vez que TextField terá muito código dentro dele, incluindo serviços Firestore. Então é por terroristas, criar um arquivo separado para ele. Então o código será limpo e gerenciável. Eu iria dentro da divisão que suponha que temos modelos, nós temos telas. Vamos criar outra pasta chamada widgets. Nos widgets que os widgets separados serão retornados aqui. E eu o chamaria de campo de texto de mensagem ponto, ponto. Uma vez que ele será usado para enviar uma mensagem, ele será um widget stateful. Eu chamaria de quadro de texto de mensagem. Agora, como de costume, removerei o construtor. E nesta tela, o que precisaríamos apenas que hoje para baixo o ID de usuário atual e uma string amigável. ID atual. E uma vez que este ID atual é por padrão. Trabalho da tempestade de fogo. É por isso que temos de usar isso. E então um construtor, este NTID ponto-ponto-ponto, este amigável. Agora, vamos simplesmente para a tela de bate-papo. E depois do campo de texto expandido da mensagem, ID atual seria UID de ponto do usuário. E muito amigável. Vamos ver uma coisa. Este UID é apenas string, então vamos e torná-lo disponível. Faça uma corda como esta. E podemos torná-lo final também porque não vai mudar. Agora, dentro da função. Nós rodaríamos um contêiner e depois dávamos uma cor. Vamos a primeira coisa que eu faria é dar-lhe um monte de colonos brancos começar de largura. E depois um pouco de enchimento. Em sets. Vamos ter uma linha, porque eu vou mostrar uma string de texto, qualquer botão ícone juntos. Então isso expandido que fizemos é muito útil. Será usado muito tempo. Porque aqui eu quero que este campo de texto escolha todo o espaço disponível. Nessa declaração. Vamos dar-lhe uma decoração de entrada e rótulo. O texto deve ser rotulado, deve ser digite uma mensagem. Cor de preenchimento. Vamos dar uma chance. E então simplesmente delinear em ordem. Vamos dar um estofamento 0. Em seguida, EDS, EDS dot circular, dar-lhe 25 ADS. E como é um campo de texto, precisaríamos de um controlador de edição de texto. Este controlador, vamos ver o que está lá. Veja, isso parece tão bom. Mensagem e nulo. Depois disso, eu só queria o botão aqui. Então, dentro deste F que é expandido, as redes têm uma caixa de tamanho de dy. E então eu adotaria arquivo, dar-lhe gestos detector em umidade não será nada por enquanto. Mas nessa criança, Vamos ter uma borda de recipiente inserções e dar-lhe uma caixa. Forma será em forma de caixa de cor de ponto com azul. E dentro dela essa criança significará ícone simplesmente. Posso começar a enviar cores. Vamos salvá-lo. E veja este é o botão enviar, botão Enviar. Vamos digitar a mensagem e enviá-la para a loja de bombeiros. Então isso é tudo por este vídeo. Na próxima sessão, vamos implementar que dispara funcionalidade de armazenamento nele. 9. Como armazenar mensagens no Firebase: Agora isso é feito seção mais importante onde salvaríamos a mensagem enviada no Firestore. Então esse conceito será, vou criar uma nova coleção chamada mensagens dentro da coleção do usuário, que está dentro deste e dentro de um usuário, vou criar uma nova mensagem eleitoral. Suponha que seja assim. E então, e então ele terá o ID do usuário com quem este usuário está falando, seu amigo pregando. Vai ser assim. Suponha mensagens. Então será a identificação da pessoa com quem ele está falando. E então nessa coleção, novamente, dentro dela eu terei uma coleção chamada chats. E dentro deste chat, vamos armazenar todas as mensagens, como supor mensagem Oi, amigos, suponha que outro campo será data. Suponha que outro campo possa ser tipo. Será uma mensagem de texto. E isso será incrementado automaticamente. Não que use porque aqui, pode haver muitas conversas. Uma mensagem de alguém só neste vídeo pode ser muitas mensagens. E aqui mais dois. Dados ou T será o L1 é centrado ID e um deles é dizer, Bem, eu não gostei disso. Eu criaria essa coleção de mensagens em ambos os usuários que estão conversando uns com os outros para que ambos tenham mensagens recentes exibidas em seu perfil. E aqui eu também vou ter algo chamado supor aqui, este é um ID de usuário. Dentro disto aqui vou ter uma última mensagem de filme. Apenas, você vai entender por que eu estou usando este último campo de mensagem. Mas agora, você tem que tentar entender corretamente o que estou prestes a escrever. Seja o que for que te mostrei, escreverei tudo nesse código. Então código para mensagem, cadeia de texto. E aqui no GestureDetector. Primeira coisa que eu iria escrever uma variável chamada string mensagem é igual ao texto do ponto controlador. Terei a mensagem dentro dela. E então eu limparia o controle. Isso é o que eles querem ter. O tipo será removido. Mas nós só distorcemos, então não é um problema. Então eu usaria a instância Firestore. No entanto, nessa coleção, usuários, eu obteria esse documento deste usuário com que é o CurrentUser. Dentro dele, eu criaria uma coleção chamada mensagens como mostrei a vocês. Então, dentro dele, vou criar um documento para essa pessoa. Este usuário atual está falando com seu amigo. E então eu criaria outra coleção chamada chats. E então adicione assim. Sei que pode ser um pouco esmagador, mas é assim que podemos fazê-lo. Obviamente o promotor e outras maneiras também. Mas eu vim com essa solução. Agora, o que temos que salvar é a identificação do remetente em jejum. Segundo é a identificação do receptor. Você pode estar pensando por que estamos salvando receptor se você já tiver armazenado esses dados. Mas eu estou apenas explicando por que eu estou usando isso para que se ele for um remetente, a mensagem será mostrada no lado direito. Se for um receptor, suponha que a mensagem será mostrada no lado esquerdo como este, apenas para diferenciar do que a mensagem em si. Como este. Depois as nossas massas quando escrevemos o Beck. Mas se você quiser, você pode implementar mais tarde para aqueles são arquivos também. Cabe a você. E a data é muito importante. Então será data, hora agora para que possamos filtrar e trazer suas mensagens recentes em uma ordem decrescente. Agora, o que eu quero é que depois que isso for armazenado, eu teria novamente um Firestore, essa coleção. Novamente uma consulta, depois Vg, usuário atual. Mas mensagens de coleta. E aqui eu iria definir algo neste documento que está atingindo amigável, mas definir apenas um. Essa é a última mensagem, assim. E aqui ele será mostrado assim, esta última mensagem, se você tem, se você está usando o que separado agora e se você viu a página inicial, você pode ver no subtítulo a última mensagem que você enviou ou recebeu. E então você pode clicar no chat e ler todo o chat. Então isso é, isso não é. Vamos tentar testar este código em primeiro lugar porque ele só irá armazenar na coleção de um usuário. Como eu disse, o mesmo código deve ser para um receptor também. Mas vamos testar se ele está funcionando corretamente ou não. Veja, agora ele foi removido. E esperamos que ele seja armazenado nesse ano corrente. Essa é a coleção deste usuário. Se eu clicar sobre isso, ver essas mensagens, então este ID e o ID deste usuário são os mesmos que eu estava explicando. Então ele está falando com esse usuário. E se eu for para este usuário, a última mensagem foi transmitida. E o chat foi apenas uma verificação de que esta, esta mensagem apenas. Agora, a mesma coisa que temos que fazer para o usuário que está recebendo bem, que ele seja atualizado em seu perfil como essa é a mensagem. E agora estou removendo isso porque precisamos da mesma mensagem para o usuário. Agora salva a mesma mensagem nessa coleção do usuário com o usuário atual está falando com esse final. Está terminando aqui. Depois disso, ele corresponde, tem o mesmo código. Arquivo, este arquivo de arquivos, usuários de coleção de pontos. Mas doutora. Agora aqui será amigo. Basta lembrar que o usuário atual, estamos indo dentro do usuário amigo e recebendo uma coleção chamada mensagens. Então eles usam que amigo está falando com este usuário, que é Virginia dot ID atual. E vamos criar uma coleção e adicionar, digamos, redes têm o mesmo ID líquido como corrente de ponto rígido. Eu fiz isso, esta mensagem foi enviar Vida. Este usuário. Em seguida, a identificação do receptor. Identificação. Então a mensagem será tipo, será texto D. Encontrará os moribundos. Agora. E depois que estiver feito. E novamente, salvei a última mensagem. É justo para essa instância, não usuários de coleção. Ponto, ponto, ponto, ponto, mensagens de coleção, ponto doc. Mas a identificação atual. Isso é apenas reto. A última mensagem é uma mensagem. Então eu sei que isso não é para digerir, mas eu vou sugerir que você apenas pause o vídeo e tente entender esse código linha por linha. Porque este conceito não é tão complicado. Mas há um monte de código envolvido dessa forma. Agora, vamos testar. Se eu continuar e pesquisar novamente, obtenha o usuário. E agora se eu digitar como você e enviar esta mensagem será armazenado em, deve ser armazenado em que os usuários. Veja o primeiro e o segundo. E aqui está falando com essa pessoa. A última mensagem foi como você está? E então quem manda a data da mensagem? Então é isso. Para este vídeo. Você tem que entender esse conceito e o tribunal corretamente. No próximo vídeo, vamos trabalhar em buscar, enviar mensagens SMS e mostrá-lo neste corpo. Obrigado.