Flutter聊天消息编辑插件chat_composer的使用

Flutter聊天消息编辑插件chat_composer的使用

chat_composer 是一个Flutter插件，用于轻松实现聊天输入框功能，支持文本、音频和其他媒体的发送。以下是如何设置和使用该插件的详细说明，并提供了一个完整的示例代码。

1. 插件介绍

chat_composer 提供了一个简洁的聊天输入框组件，用户可以通过它发送文本消息、录制音频并发送其他媒体文件。该插件适用于需要实现聊天功能的应用程序。

2. 设置

2.1 Android 设置

2.1.1 权限

在 AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

2.1.2 AndroidX 支持

1. 在 gradle.properties 文件中添加以下配置：

   android.useAndroidX=true
   android.enableJetifier=true
   

2. 确保在 android/app/build.gradle 文件中将 compileSdkVersion 设置为 33 或更高版本：

   android {
     compileSdkVersion 33
     ...
   }
   

3. 确保在 android/app/build.gradle 文件中将 minSdkVersion 设置为 18 或更高版本：

   defaultConfig {
     minSdkVersion 18
     ...
   }
   

4. 将所有 android. 依赖项替换为它们的 AndroidX 对应项（具体替换列表可以参考官方文档）。

2.2 iOS 设置

目前 chat_composer 的 iOS 版本正在开发中。在此之前，您可以通过购买咖啡来支持开发者的工作。

3. 添加依赖

在 pubspec.yaml 文件中添加 chat_composer 依赖：

dependencies:
  chat_composer: ^1.0.2 # 最新版本

4. 导入插件

在 Dart 文件中导入 chat_composer：

import 'package:chat_composer/chat_composer.dart';

5. 使用示例

以下是一个完整的示例代码，展示了如何使用 chat_composer 实现一个简单的聊天界面：

import 'package:chat_composer/chat_composer.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 用于存储聊天记录的列表
  List<String> list = [];

  // 文本输入控制器
  TextEditingController con = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: const Text('Chat Composer'),
        ),
        body: Column(
          children: [
            // 聊天记录显示区域
            Expanded(
              child: ListView.builder(
                itemCount: list.length,
                itemBuilder: (_, pos) {
                  return ListTile(title: Text(list[pos]));
                },
              ),
            ),
            // 聊天输入框组件
            ChatComposer(
              controller: con, // 绑定文本输入控制器
              onReceiveText: (str) {
                // 当用户发送文本时触发
                setState(() {
                  list.add('TEXT : ${str!}'); // 将文本添加到聊天记录
                  con.text = ''; // 清空输入框
                });
              },
              onRecordEnd: (path) {
                // 当用户结束录音时触发
                setState(() {
                  list.add('AUDIO PATH : ${path!}'); // 将音频路径添加到聊天记录
                });
              },
              textPadding: EdgeInsets.zero, // 设置文本输入框的内边距
              leading: CupertinoButton(
                padding: EdgeInsets.zero,
                child: const Icon(
                  Icons.insert_emoticon_outlined, // 表情按钮
                  size: 25,
                  color: Colors.grey,
                ),
                onPressed: () {}, // 暂时不做处理
              ),
              actions: [
                CupertinoButton(
                  padding: EdgeInsets.zero,
                  child: const Icon(
                    Icons.attach_file_rounded, // 附件按钮
                    size: 25,
                    color: Colors.grey,
                  ),
                  onPressed: () {}, // 暂时不做处理
                ),
                CupertinoButton(
                  padding: EdgeInsets.zero,
                  child: const Icon(
                    Icons.camera_alt_rounded, // 相机按钮
                    size: 25,
                    color: Colors.grey,
                  ),
                  onPressed: () {}, // 暂时不做处理
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}