chat uikit flutter
version: 4.0.0
Você só precisa integrar o Chat SDK para obter facilmente bate -papo, conversas, recursos de grupo, e também pode se comunicar com outros produtos, como quadros brancos através de mensagens de sinalização. O bate -papo pode cobrir vários cenários de negócios, suportar o acesso e o uso de várias plataformas e atender totalmente às necessidades de comunicação.
Este documento apresenta como executar rapidamente a demonstração de bate -papo na plataforma iOS. Para as outras plataformas, consulte o documento:
O Chat SDK vem com Tuikit, que é um conjunto oficial de componentes da interface do usuário que têm lógica de negócios de bate-papo embutida. Tuikit inclui componentes como conversa, bate -papo, cadeia de relacionamento e grupo. Consulte Visão geral da Biblioteca Tuikit para obter mais detalhes.
Os desenvolvedores podem usar esses componentes da interface do usuário para adicionar rápida e facilmente módulos de bate-papo no aplicativo aos seus aplicativos móveis.
Atualmente, o Flutter Tuikit contém os seguintes componentes principais:
Além desses componentes, existem outros componentes e widgets úteis disponíveis para ajudar os desenvolvedores a atender às suas necessidades de negócios, como a lista de aplicativos de entrada em grupo e a lista de membros do grupo.
As plataformas são compatíveis com a implantação do nosso uikit de bate -papo.
Consulte o Run Demo para obter um guia completo e detalhado sobre como começar.
O guia a seguir descreve como criar rapidamente um aplicativo de bate -papo simples usando o Flutter Tuikit. Consulte o apêndice se quiser aprender sobre os detalhes e parâmetros de cada widget.
Inscreva -se e faça login no console de bate -papo.
Crie um aplicativo e digite -o. Clique em usuários e crie duas contas.
A maneira correta de distribuir
UserSigé integrar o código de cálculo paraUserSigno seu servidor e fornecer uma API orientada para o aplicativo. QuandoUserSigé necessário, seu aplicativo pode enviar uma solicitação ao servidor de negócios para umUserSig.Para obter mais informações, consulte como calcular usuários no servidor?.
Crie um aplicativo Flutter rapidamente seguindo a documentação do Flutter.
Tuikit precisa das permissões de fotografar/álbum/gravação/rede para funções básicas de mensagens. Você precisa declarar essas permissões manualmente para usar os recursos relevantes normalmente.
Aberto android/app/src/main/AndroidManifest.xml e adicione as seguintes linhas entre <manifest> e </manifest> .
< uses-permission android : name = " android.permission.INTERNET " />
< uses-permission android : name = " android.permission.RECORD_AUDIO " />
< uses-permission android : name = " android.permission.FOREGROUND_SERVICE " />
< uses-permission android : name = " android.permission.ACCESS_NETWORK_STATE " />
< uses-permission android : name = " android.permission.VIBRATE " />
< uses-permission android : name = " android.permission.ACCESS_BACKGROUND_LOCATION " />
< uses-permission android : name = " android.permission.WRITE_EXTERNAL_STORAGE " />
< uses-permission android : name = " android.permission.READ_EXTERNAL_STORAGE " />
< uses-permission android : name = " android.permission.CAMERA " />
< uses-permission android : name = " android.permission.READ_MEDIA_IMAGES " />
< uses-permission android : name = " android.permission.READ_MEDIA_VIDEO " /> Abra ios/Podfile e adicione as seguintes linhas ao final do arquivo.
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
target.build_configurations.each do |config|
config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
config.build_settings['ENABLE_BITCODE'] = 'NO'
config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
end
target.build_configurations.each do |config|
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',
'PERMISSION_MICROPHONE=1',
'PERMISSION_CAMERA=1',
'PERMISSION_PHOTOS=1',
]
end
end
end
Adicione tencent_cloud_chat_uikit sob dependencies no arquivo pubspec.yaml ou execute o seguinte comando:
flutter pub add tencent_cloud_chat_uikitEle suporta Android e iOS por padrão. Se você também deseja usá -lo na web, consulte o seguinte guia.
Versão 0.1.4 ou posterior é necessária para oferecer suporte à Web.
Se o seu projeto Flutter existente não suportar a Web, o Run flutter create . No diretório raiz do projeto, para adicionar suporte à Web.
Instale as dependências JavaScript na web/ usando npm ou yarn .
cd web
npm init
npm i tim-js-sdk
npm i tim-upload-plugin Abra web/index.html e adicione as duas linhas a seguir entre <head> e </head> para importá -las.
< script src =" ./node_modules/tim-upload-plugin/index.js " > </ script >
< script src =" ./node_modules/tim-js-sdk/tim-js-friendship.js " > </ script >Inicialize o Tuikit quando o seu aplicativo iniciar. Você só precisa executar a inicialização uma vez para que o projeto inicie.
Obtenha a instância de Tuikit primeiro usando TIMUIKitCore.getInstance() , seguido pela inicialização com seu sdkAppID .
/// main.dart
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
final CoreServicesImpl _coreInstance = TIMUIKitCore . getInstance ();
@override
void initState () {
_coreInstance. init (
sdkAppID : 0 , // Replace 0 with the SDKAppID of your Tencent Cloud Chat application
loglevel : LogLevelEnum . V2TIM_LOG_DEBUG ,
listener : V2TimSDKListener ());
super . initState ();
}}Você também pode registrar uma função de retorno de chamada para
onTUIKitCallbackListeneraqui. Consulte o apêndice.
Agora você pode fazer login em uma das contas de teste geradas na etapa 0 para iniciar o módulo de bate -papo em nuvem tencent.
Faça login usando _coreInstance.login .
/// main.dart
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
final CoreServicesImpl _coreInstance = TIMUIKitCore . getInstance ();
_coreInstance. login (userID : userID, userSig : userSig);NOTA: Importar usuários para o seu aplicativo é apenas para fins de depuração e não pode ser usado para a versão de liberação. Antes de publicar seu aplicativo, você deve gerar seus usuários a partir do seu servidor. Consulte: Gere assinatura.
Você pode usar a página de lista de conversas (canais) como a página inicial do seu módulo de bate -papo, que inclui todas as conversas com usuários e grupos que possuem registros de bate -papo.
Você pode criar uma aula Conversation , com TIMUIKitConversation como seu corpo, para renderizar a lista de conversas. Você só precisa fornecer o retorno de chamada onTapItem , que permite que os usuários naveguem para a página de bate -papo para cada conversa. Na próxima etapa, apresentaremos a aula Chat .
import 'package:flutter/material.dart' ;
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
class Conversation extends StatelessWidget {
const Conversation ({ Key ? key}) : super (key : key);
@override
Widget build ( BuildContext context) {
return Scaffold (
appBar : AppBar (
title : const Text (
"Message" ,
style : TextStyle (color : Colors .black),
),
),
body : TIMUIKitConversation (
onTapItem : (selectedConv) {
Navigator . push (
context,
MaterialPageRoute (
builder : (context) =>
Chat (
selectedConversation : selectedConv,
),
));
},
),
);
}
}A página de bate -papo consiste na lista de mensagens principal e uma barra de envio de mensagens na parte inferior.
Você pode criar uma aula Chat , com TIMUIKitChat como seu corpo, para renderizar a página de bate -papo. Recomendamos fornecer uma função de retorno de chamada onTapAvatar para navegar até a página de perfil para o contato atual, que apresentaremos na próxima etapa.
import 'package:flutter/material.dart' ;
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
class Chat extends StatelessWidget {
final V2TimConversation selectedConversation;
const Chat ({ Key ? key, required this .selectedConversation}) : super (key : key);
String ? _getConvID () {
return selectedConversation.type == 1
? selectedConversation.userID
: selectedConversation.groupID;
}
@override
Widget build ( BuildContext context) {
return TIMUIKitChat (
conversationID : _getConvID () ?? '' ,
conversationType : selectedConversation.type ?? 1 ,
conversationShowName : selectedConversation.showName ?? "" ,
onTapAvatar : (_) {
Navigator . push (
context,
MaterialPageRoute (
builder : (context) => UserProfile (userID : userID),
));
},
);
}Esta página mostra o perfil de um usuário específico e mantém o relacionamento entre o usuário logado atual e o outro usuário.
Você pode criar uma classe UserProfile , com TIMUIKitProfile como seu corpo, para renderizar a página de perfil do usuário.
O único parâmetro que você precisa fornecer é userID , enquanto esse componente gera automaticamente o perfil e a página de manutenção de relacionamento com base na existência de amizade.
Dica : use
profileWidgetBuilderprimeiro para personalizar alguns widgets de perfil e determine sua sequência vertical usandoprofileWidgetsOrderse você deseja personalizar esta página. Se esse método não puder atender às suas necessidades de negócios, considere usarbuilder.
import 'package:flutter/material.dart' ;
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
class UserProfile extends StatelessWidget {
final String userID;
const UserProfile ({ required this .userID, Key ? key}) : super (key : key);
@override
Widget build ( BuildContext context) {
return Scaffold (
appBar : AppBar (
title : const Text (
"Message" ,
style : TextStyle (color : Colors .black),
),
),
body : TIMUIKitProfile (
userID : widget.userID,
),
);
}
}Agora, seu aplicativo pode enviar e receber mensagens, exibir a lista de conversas e gerenciar amizades de contato. Você pode usar outros componentes do Tuikit para implementar rápida e facilmente o módulo de bate -papo completo.
Não. Você não precisa integrar o Chat SDK novamente. Se você deseja usar as APIs relacionadas ao Chat SDK, poderá obtê -las via TIMUIKitCore.getSDKInstance() . Este método é recomendado para garantir a consistência da versão SDK de bate -papo.
Verifique se você ativou a câmera , o microfone , o álbum ou outras permissões relacionadas.
Refere -se à etapa 1 acima.
Verifique se o dispositivo não está ocupado por outros recursos. Como alternativa, clique em Build para gerar um pacote APK, arrastá -lo para o simulador e executá -lo.
Se ocorrer um erro após a configuração, clique em Produto> Limpe a pasta de construção , limpe o produto e execute pod install ou flutter run novamente.
Ligue o modo de avião no seu Apple Watch e vá para Configurações> Bluetooth no seu iPhone para desligar o Bluetooth.
Reinicie o Xcode (se aberto) e execute flutter run novamente.
androidappsrcmainAndroidManifest.xml e xmlns:tools="http://schemas.android.com/tools" / android:label="@string/android_label" / tools:replace="android:label" como seguinte. < manifest xmlns : android = " http://schemas.android.com/apk/res/android "
package = " Replace it with your Android package name "
xmlns : tools = " http://schemas.android.com/tools " >
< application android : label = " @string/android_label " tools : replace = " android:label "
android : icon = " @mipmap/ic_launcher "
// Specify an icon path
android : usesCleartextTraffic = " true "
android : requestLegacyExternalStorage = " true " >androidappbuild.gradle e Complete minSdkVersion e targetSdkVersion no defaultConfig . defaultConfig {
applicationId " " // Replace it with your Android package name
minSdkVersion 21
targetSdkVersion 30
}Para aqueles que exigem recursos de chamada de voz e vídeo em tempo real, juntamente com o nosso pacote de componentes de voz e vídeo de voz e vídeo dedicados, tencent_calls_uikit. Este pacote robusto e rico em recursos foi projetado especificamente para complementar nossa solução existente e se integrar perfeitamente a ele, fornecendo uma experiência de comunicação abrangente e unificada para seus usuários.
