Flutter即时通讯UI插件nim_chatkit_ui的使用

Flutter即时通讯UI插件nim_chatkit_ui的使用

本文将详细介绍如何在 Flutter 项目中集成并使用 nim_chatkit_ui 插件来实现即时通讯功能。该插件提供了丰富的 UI 组件，帮助开发者快速构建聊天界面。

引入依赖

首先，确保您的项目支持 flutter pub get 命令。然后，在项目的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  nim_chatkit_ui: ^1.0.0

保存文件后，运行以下命令以安装依赖：

flutter pub get

初始化插件

在使用 nim_chatkit_ui 之前，需要进行初始化。通常，您需要在 main.dart 文件中完成初始化操作。以下是初始化代码示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化 ChatKit UI
    NimChatKit.init(
      appKey: 'your_app_key', // 替换为您的 App Key
      account: 'your_account', // 替换为当前用户的账号
      token: 'your_token', // 替换为当前用户的 Token
    );

    return MaterialApp(
      home: ChatScreen(),
      theme: ThemeData.dark(),
    );
  }
}

创建聊天界面

接下来，我们将创建一个简单的聊天界面。以下是完整的示例代码：

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

class ChatScreen extends StatefulWidget {
  [@override](/user/override)
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('即时通讯'),
      ),
      body: Column(
        children: [
          // 聊天区域
          Expanded(
            child: NimChat(
              onMessageSend: (message) {
                print('发送的消息: $message');
              },
            ),
          ),
          // 输入框
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: '输入消息...'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    if (_controller.text.isNotEmpty) {
                      NimChat.sendMessage(_controller.text);
                      _controller.clear();
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter即时通讯UI插件nim_chatkit_ui的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter即时通讯UI插件nim_chatkit_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


nim_chatkit_ui 是一个基于网易云信（NIM）的即时通讯 SDK 的 Flutter UI 插件，它提供了现成的聊天界面组件，帮助开发者快速集成即时通讯功能。以下是如何使用 nim_chatkit_ui 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 nim_chatkit_ui 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  nim_chatkit_ui: ^x.x.x  # 请替换为最新版本

然后运行 flutter pub get 来获取依赖。

2. 初始化 NIM SDK

在使用 nim_chatkit_ui 之前，你需要初始化网易云信的 NIM SDK。通常，你可以在 main.dart 文件中进行初始化：

import 'package:nim_core/nim_core.dart';

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

  // 初始化 NIM SDK
  await NimCore.instance.init(
    appKey: 'your_app_key',  // 替换为你的 App Key
    apnsCername: 'your_apns_cername',  // 如果需要推送，填写 APNS 证书名
    fcmCername: 'your_fcm_cername',  // 如果需要 FCM，填写 FCM 证书名
  );

  runApp(MyApp());
}

3. 登录 NIM SDK

在初始化 SDK 后，你需要使用账号信息登录 NIM SDK：

import 'package:nim_core/nim_core.dart';

Future<void> loginNIM() async {
  try {
    await NimCore.instance.authService.login(
      account: 'your_account',  // 替换为你的账号
      token: 'your_token',      // 替换为你的 token
    );
    print('Login success');
  } catch (e) {
    print('Login failed: $e');
  }
}

4. 使用 nim_chatkit_ui 插件

nim_chatkit_ui 提供了现成的聊天界面组件，你可以直接使用这些组件来构建聊天界面。

4.1 会话列表

要显示会话列表，可以使用 ConversationPage 组件：

import 'package:flutter/material.dart';
import 'package:nim_chatkit_ui/conversation/conversation_page.dart';

class ConversationListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('会话列表'),
      ),
      body: ConversationPage(),
    );
  }
}

4.2 聊天界面

要显示聊天界面，可以使用 ChatPage 组件：

import 'package:flutter/material.dart';
import 'package:nim_chatkit_ui/chat/chat_page.dart';

class ChatDetailPage extends StatelessWidget {
  final String sessionId;
  final int sessionType;

  ChatDetailPage({required this.sessionId, required this.sessionType});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('聊天界面'),
      ),
      body: ChatPage(
        sessionId: sessionId,
        sessionType: sessionType,
      ),
    );
  }
}

5. 导航到聊天界面

你可以通过导航将用户从会话列表页面引导到聊天界面：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => ChatDetailPage(
      sessionId: 'target_session_id',  // 替换为目标会话 ID
      sessionType: 1,  // 会话类型，1 表示单聊，2 表示群聊
    ),
  ),
);

6. 处理消息

nim_chatkit_ui 插件会自动处理消息的发送和接收，但你可以通过监听器来处理自定义逻辑：

import 'package:nim_core/nim_core.dart';

void setupMessageListener() {
  NimCore.instance.messageService.onMessage.listen((message) {
    print('收到消息: ${message.messageId}');
  });
}
回到顶部