Flutter聊天输入插件chat_input的使用

Flutter聊天输入插件chat_input的使用

Chat Input Widget 是一个功能丰富的 Flutter 库，旨在简化聊天界面的创建。它支持语音录制、图片附件和文本输入等功能，从而增强聊天屏幕中的用户交互。

特性

• 语音录制：轻松录制并发送语音消息。
• 图片附件：从相册选择或使用相机拍摄新照片并附加。
• 文本输入：轻松地键入并发送文本消息。
• 自定义化：根据您的应用设计自定义输入框的外观和行为。
• 实时反馈：显示语音录制时长及滑动取消动画。
• 触觉反馈：在关键操作期间提供振动反馈。

安装

要将 Chat Input Widget 集成到您的 Flutter 项目中，请按照以下步骤操作：

1. 打开您的 pubspec.yaml 文件。
2. 添加以下依赖项：

dependencies:
  chat_input_widget: ^1.0.0  # 替换为最新版本

运行 flutter pub get 来安装该包。

使用

在聊天屏幕中集成 Chat Input Widget，请参考以下示例代码：

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

class ChatScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('聊天屏幕'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              // 显示聊天消息
            ),
          ),
          InputWidget(
            onSendAudio: (audioFile, duration) {
              // 处理发送语音消息
            },
            onSendText: (text) {
              // 处理发送文本消息
            },
            onSendImage: (selectedFile) {
              // 处理发送图片消息
            },
            // 如果需要，可以自定义其他属性
          ),
        ],
      ),
    );
  }
}

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 Chat Input Widget。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 示例',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter 示例首页'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('聊天屏幕'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              // 显示聊天消息
            ),
          ),
          InputWidget(
            onSendAudio: (audioFile, duration) {
              // 处理发送语音消息
            },
            onSendText: (text) {
              // 处理发送文本消息
            },
            onAttachmentClick: () {},
            // 如果需要，可以自定义其他属性
          ),
        ],
      ),
    );
  }
}