以下の用途向け: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 のよくある質問

ウィジェットを追加する前に何を設定する必要がありますか?

公式デモに従って、選択した 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 を構築します。