다음을 위해 설계됨: FLUTTER

Flutter
Chat UI Kit

Tencent RTC의 Flutter Chat UI Kit로 연동된 메시징 화면을 만드세요. 대화 및 메시지 위젯을 제품의 레이아웃과 탐색 구조에 맞게 조정할 수 있습니다.

개발자 리소스

Flutter용 Chat UI Kit 문서 및 예제

대화를 위해 설계

커뮤니티 구성원들이 일정, 사진, 일상적인 이야기를 공유할 수 있는 공간을 제공하세요.

모든 메시지를 위한 공간

Flutter 컴포넌트로 작은 화면과 넓은 레이아웃에 채팅을 구현하세요.

FLUTTER 채팅 기능

연결할 준비가 된 핵심 기능

대화 목록

  • 최근 대화
  • 읽지 않은 메시지 표시

메시징 UI

  • 연동된 메시지 보기
  • 통합 메시지 작성기

미디어 공유

  • 사진 및 첨부 파일
  • 네이티브 미디어 권한

사용자 및 그룹

  • 일대일 대화
  • 그룹 상호작용

내 것으로 만들기

  • UI 소스 코드 조정
  • 내비게이션에 맞게 조정

연결된 컴포넌트

  • 기반이 되는 Chat SDK
  • 애플리케이션 식별 정보

Flutter Chat Components 살펴보기

컴포넌트가 어떻게 연동되는지 살펴보세요.

대화

대화를 위한 공간

초기화된 Chat 앱에 대화 위젯을 추가하세요.

문서 읽기
conversations.dart
import 'package:tencent_cloud_chat_conversation/tencent_cloud_chat_conversation.dart';

const TencentCloudChatConversation()

커스터마이징

Flutter 채팅 UI 맞춤 설정

고유한 시각적 스타일과 애플리케이션 흐름을 채팅에 적용하세요.

모든 대화에 담긴 브랜드

Flutter UI Kit의 테마와 빌더를 통해 시각적 스타일을 조정하세요.

문서 읽기

시작하기

첫 대화는 여기서 시작됩니다

  1. 01

    앱 만들기

    Chat 애플리케이션과 테스트 사용자를 설정하세요.

    Chat 콘솔 열기
  2. 02

    Flutter용 Chat UI Kit 추가

    플랫폼 가이드에 따라 프로젝트를 연결하세요.

    통합 가이드 따르기
  3. 03

    사용자 연결

    테스트 사용자 2명으로 로그인하고 첫 메시지를 보내세요.

    사용자 연결
Flutter용 Chat UI Kit
터미널
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()

Flutter Chat UI Kit FAQ

위젯을 추가하기 전에 무엇을 구성해야 하나요?

공식 데모에 따라 선택한 UI 패키지를 설치하고 UI Kit을 초기화한 후 로그인하여 컴포넌트를 등록하세요. 사용하는 미디어 기능에 필요한 네이티브 권한을 구성하세요. Flutter UI Kit과 Core SDK의 환경 요구 사항은 서로 다릅니다.

Flutter UI Kit는 SDK와 어떻게 다른가요?

UI Kit은 메시징 SDK 위에 연동된 인터페이스 컴포넌트를 추가합니다. 전체 인터페이스를 직접 구축하려면 Core SDK를 사용하세요.

Flutter Chat UI Kit 사용자를 인증하려면 어떻게 해야 하나요?

백엔드에서 프로덕션 UserSig를 생성하세요. 인증을 위해 클라이언트에 전달하고 애플리케이션 비밀 키는 서버에 보관하세요.

이 Flutter 코드 조각만으로 완전한 애플리케이션을 만들 수 있나요?

각 연동 단계를 보여 줍니다. 가져오기, 초기화, 로그인, 오류 처리 및 대상별 구성은 전체 가이드를 따르세요. 출시 전에 별도 계정으로 메시징을 테스트하세요.

Flutter Chat UI Kit 사용 요금은 어떻게 책정되나요?

호스팅 Chat 서비스 사용은 선택한 요금제를 따릅니다. 애플리케이션에 제공되는 기능과 한도를 확인하세요. 선택적 플러그인과 Call 서비스에는 별도 요구 사항이 적용될 수 있습니다.

Dart 프로젝트에 Flutter Chat UI Kit를 통합하려면 어떻게 해야 하나요?

문서에 명시된 Flutter 패키지를 설치하고 각 대상의 네이티브 프로젝트 설정을 완료하세요. 기반 iOS와 Android 동작과 함께 위젯 수명 주기를 테스트하세요.

앱 출시 전에 Flutter Chat UI Kit를 어떻게 테스트하나요?

로그인, SDK 준비 상태, 송수신 이벤트, 재연결 후 메시지 상태를 확인하세요.

Flutter Chat UI Kit의 인터페이스를 어떻게 맞춤 설정하나요?

이 페이지에서 사용하는 tencent_cloud_chat_conversation 패키지에서는 TencentCloudChatConversationBuilders를 전달해 conversationHeaderBuilder 등의 빌더로 위젯을 맞춤 설정할 수 있습니다. 예를 들어 연결된 대화 목록을 유지하면서 목록 헤더를 제품명과 검색 진입점으로 바꿀 수 있습니다. 빌더 시그니처는 설치한 패키지 버전과 일치해야 합니다. 이 API는 해당 패키지 계열에 속하므로 이전 TIMUIKitChat 예제나 다른 Flutter UI Kit와 혼용하지 마세요.

다음 단계에 필요한 지원 찾기

다음 대화 경험 구축하기

Flutter용 Chat UI Kit으로 app을 구축하세요.