Flutter实时聊天插件stream_chat_flutter的使用

简介

Stream Chat Flutter SDK 是一个官方提供的用于在Flutter应用程序中集成实时聊天功能的组件库。它提供了丰富的UI组件，使得开发者可以快速构建出美观且功能强大的聊天应用。

快速链接

• 注册获取API Key
• Flutter Chat 教程
• Chat UI Kit
• UI 文档
• Chat Client 文档

示例代码

以下是一个完整的示例代码，展示了如何使用 stream_chat_flutter 创建一个基本的聊天应用：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 stream_chat_flutter 依赖：

dependencies:
  stream_chat_flutter: ^latest_version

然后运行 flutter packages get 来安装依赖。

2. 初始化 StreamChatClient

在 main.dart 中初始化 StreamChatClient 并连接用户：

import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final client = StreamChatClient(
    'your_api_key_here', // 替换为你的 API Key
    logLevel: Level.OFF,
  );

  await client.connectUser(
    User(id: 'user_id_here'), // 替换为用户的 ID
    'user_token_here', // 替换为用户的 Token
  );

  runApp(MyApp(client: client));
}

class MyApp extends StatelessWidget {
  final StreamChatClient client;

  const MyApp({Key? key, required this.client}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StreamChat(
        client: client,
        child: ChannelListPage(),
      ),
    );
  }
}

3. 创建频道列表页面

创建一个显示频道列表的页面：

class ChannelListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Channels')),
      body: StreamChannelListView(
        filter: Filter.in_('members', [StreamChat.of(context).currentUser!.id]),
        sort: [SortOption('last_message_at')],
        limit: 20,
      ),
    );
  }
}

4. 创建聊天页面

当用户点击某个频道时，导航到聊天页面：

class ChatPage extends StatelessWidget {
  final Channel channel;

  ChatPage({required this.channel});

  @override
  Widget build(BuildContext context) {
    return StreamChannel(
      channel: channel,
      child: Scaffold(
        appBar: StreamChannelHeader(
          onImageTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DebugChannelPage(),
              ),
            );
          },
        ),
        body: Column(
          children: [
            Expanded(
              child: StreamMessageListView(
                threadBuilder: (_, parent) => ThreadPage(parent: parent!),
              ),
            ),
            StreamMessageInput(),
          ],
        ),
      ),
    );
  }
}

5. 创建线程页面

当用户点击某条消息时，导航到线程页面：

class ThreadPage extends StatelessWidget {
  final Message parent;

  ThreadPage({required this.parent});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: StreamThreadHeader(parent: parent),
      body: Column(
        children: [
          Expanded(
            child: StreamMessageListView(
              parentMessage: parent,
            ),
          ),
          StreamMessageInput(
            messageInputController: StreamMessageInputController(
              message: Message(parentId: parent.id),
            ),
          ),
        ],
      ),
    );
  }
}

自定义样式

你可以通过 StreamChatTheme 来自定义聊天界面的样式：

class MyApp extends StatelessWidget {
  final StreamChatClient client;

  const MyApp({Key? key, required this.client}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final theme = ThemeData(
      primarySwatch: Colors.green,
    );

    return MaterialApp(
      theme: theme,
      home: StreamChat(
        client: client,
        streamChatThemeData: StreamChatThemeData.fromTheme(theme).copyWith(
          ownMessageTheme: MessageTheme(
            messageBackgroundColor: Colors.black,
            messageText: TextStyle(color: Colors.white),
            avatarTheme: AvatarTheme(borderRadius: BorderRadius.circular(8)),
          ),
        ),
        child: ChannelListPage(),
      ),
    );
  }
}

离线存储

为了实现离线存储，你可以使用 stream_chat_persistence 包：

import 'package:stream_chat_persistence/stream_chat_persistence.dart';

final chatPersistentClient = StreamChatPersistenceClient(
  logLevel: Level.INFO,
  connectionMode: ConnectionMode.regular,
);

final client = StreamChatClient(
  'your_api_key_here',
  logLevel: Level.INFO,
)..chatPersistenceClient = chatPersistentClient;

总结

以上是使用 stream_chat_flutter 插件构建实时聊天应用的基本步骤。通过这些步骤，你可以快速搭建一个功能完善的聊天应用，并根据需要进行自定义和扩展。更多详细信息请参考 官方文档。