CRIADO PARA FLUTTER

Flutter
Chat UI Kit

Crie telas de mensagens integradas com o Flutter Chat UI Kit da Tencent RTC. Adapte os widgets de conversas e mensagens ao layout e à navegação do seu produto.

RECURSOS PARA DESENVOLVEDORES

Documentação e exemplos de Chat UI Kit para Flutter

Espaço para cada mensagem

Leve o chat a telas compactas e layouts mais amplos com componentes Flutter.

RECURSOS DE CHAT PARA FLUTTER

Recursos essenciais, prontos para conectar

Listas de conversas

  • Conversas recentes
  • Indicadores de mensagens não lidas

Interface de mensagens

  • Visualizações de mensagens integradas
  • Um campo de composição integrado

Compartilhamento de mídia

  • Fotos e anexos
  • Permissões nativas de mídia

Pessoas e grupos

  • Conversas diretas
  • Interações em grupo

Deixe com a sua cara

  • Adapte o código-fonte da interface
  • Adapte à sua navegação

Componentes conectados

  • Chat SDK subjacente
  • A identidade do seu aplicativo

Explore Flutter Chat Components

Veja como os componentes funcionam em conjunto.

Conversas

Um espaço para suas conversas

Adicione o widget de conversa ao seu aplicativo Chat já inicializado.

Leia a documentação
conversations.dart
import 'package:tencent_cloud_chat_conversation/tencent_cloud_chat_conversation.dart';

const TencentCloudChatConversation()

PERSONALIZAÇÃO

Personalize sua interface de chat em Flutter

Leve seu estilo visual e o fluxo da aplicação para o chat.

Sua marca em cada conversa

Ajuste o estilo visual através dos temas e builders do Flutter UI Kit.

Leia a documentação

COMECE AGORA

Sua primeira conversa começa aqui

  1. 01

    Crie seu app

    Configure um aplicativo Chat e seus usuários de teste.

    Abrir o console do Chat
  2. 02

    Adicione Chat UI Kit para Flutter

    Siga o guia da plataforma para conectar seu projeto.

    Siga o Guia de Integração
  3. 03

    Conecte seus usuários

    Entre com dois usuários de teste e envie sua primeira mensagem.

    Conecte seus usuários
Chat UI Kit para Flutter
Terminal
flutter pub add tencent_cloud_chat_common \
  tencent_cloud_chat_conversation tencent_cloud_chat_message
conversations.dart
import 'package:tencent_cloud_chat_conversation/tencent_cloud_chat_conversation.dart';

const TencentCloudChatConversation()

Perguntas frequentes sobre Flutter Chat UI Kit

O que precisa ser configurado antes de adicionar os widgets?

Instale os pacotes de UI selecionados, inicialize o UI Kit, faça login e registre os componentes seguindo a demonstração oficial. Configure as permissões nativas para os recursos de mídia que você usar. O Flutter UI Kit e o Core SDK têm requisitos de ambiente distintos.

Qual é a diferença entre o Flutter UI Kit e o SDK?

O UI Kit adiciona componentes de interface integrados ao SDK de mensagens. Use o Core SDK quando quiser criar toda a interface por conta própria.

Como autentico os usuários do Flutter Chat UI Kit?

Gere o UserSig de produção no backend. Envie-o ao cliente para autenticação e mantenha o segredo da aplicação no servidor.

Esses trechos de Flutter formam uma aplicação completa?

Eles mostram etapas individuais da integração. Siga o guia completo para importações, inicialização, login, tratamento de erros e configuração específica de cada plataforma de destino. Teste as mensagens com contas separadas antes do lançamento.

Como é definido o preço de uso do Flutter Chat UI Kit?

O uso do serviço Chat hospedado segue o plano selecionado. Consulte os recursos e limites incluídos para o seu aplicativo; plugins opcionais e serviços Call podem ter requisitos separados.

Como integro Chat UI Kit Flutter com Dart?

Instale o pacote Flutter documentado e configure o projeto nativo de cada destino. Teste o ciclo de vida dos widgets junto ao comportamento subjacente de iOS e Android.

Como testo Chat UI Kit Flutter antes de lançar a minha aplicação?

Confira login, prontidão do SDK, eventos de envio e recebimento e estado das mensagens após reconectar.

Como personalizo a interface de Chat UI Kit Flutter?

Para o pacote tencent_cloud_chat_conversation usado aqui, forneça TencentCloudChatConversationBuilders para personalizar widgets, como conversationHeaderBuilder. Por exemplo, substitua o cabeçalho da lista pelo título do seu produto e um acesso à busca, preservando a lista de conversas conectada. Mantenha as assinaturas dos builders compatíveis com a versão instalada do pacote. Essas APIs pertencem a esta família de pacotes; não as misture com exemplos antigos de TIMUIKitChat ou com outro UI Kit Flutter.

Encontre suporte para a próxima etapa

Crie sua próxima experiência de conversa

Crie app com Chat UI Kit para Flutter.