Flutter聊天文本处理插件chat_text_package的使用

ChatText

一个用于发送文本消息的Flutter包，具有“滚动到底部”按钮和实时未读消息数显示功能。

作者

Mohamed Abd Elgwad

安装

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

   dependencies:
     chat_text_package: ^<latest-version>
   

2. 导入包：

   import 'package:chat_text_package/chat_text_package.dart';
   

3. 添加ChatScreen组件：

   ChatScreen(
     messages: messages,
     scrollController: scrollController,
     otherUserName: 'Mohamed Abd El.Gwad',
     textHint: 'Enter your message',
     otherUserImage: 'https://www.euroschoolindia.com/wp-content/uploads/2023/08/cartoons-for-kids.jpg',
     onSubmitMessage: (msg) {
       messages.insert(
         0,
         Message(
           id: 1,
           body: msg,
           fromLoggedUser: true,
           createdAt: '2024-12-11 03:45 PM'
         )
       );
       setState(() {});
     }
   )
   

4. 添加消息列表与Message类：

   List<Message> messageList = [
     Message(
       id: 1,
       body: 'message',
       fromLoggedUser: false,
       createdAt: '2024-12-11 03:45 PM'
     ),
     Message(
       id: 2,
       body: 'message',
       fromLoggedUser: true,
       createdAt: '2024-12-11 03:45 PM'
     ),
   ];
   

5. 添加ScrollController以支持分页和滚动到底部：

   ScrollController scrollController = ScrollController();
   ChatScreen(
     scrollController: scrollController
   )
   

6. 设置onSubmitMessage回调函数：

   当点击发送按钮时调用此函数：

   onSubmitMessage: (String msg) {
     messages.insert(
       0,
       Message(
         id: 1,
         body: msg,
         fromLoggedUser: true,
         createdAt: '2024-12-11 03:45 PM'
       )
     );
     setState(() {});
   }
   

7. 自定义App Bar：

   如果需要默认的AppBar，则需提供otherUserName或otherUserImage参数。若要使用自定义AppBar，则不添加这两个参数。

   ChatScreen(
     otherUserName: 'Mohamed Abd El.Gwad',
     otherUserImage: 'https://www.euroschoolindia.com/wp-content/uploads/2023/08/cartoons-for-kids.jpg'
   )
   

8. 显示未读消息数：

   当有新消息到达且聊天记录向上滚动时，显示未读消息数：

   int unreadMsgRealTime = 0;
   ChatScreen(
     unreadMsgRealTime: unreadMsgRealTime
   )
   

主要贡献者

贡献者	联系方式
	WhatsApp
	WhatsApp

示例代码

以下是一个完整的示例应用，展示了如何使用chat_text_package创建一个简单的聊天界面：

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ChatScreenExample(),
    );
  }
}

class ChatScreenExample extends StatefulWidget {
  const ChatScreenExample({super.key});

  @override
  State<ChatScreenExample> createState() => _ChatScreenExampleState();
}

class _ChatScreenExampleState extends State<ChatScreenExample> {
  List<Message> messages = [
    // 简化了消息列表，避免重复
    Message(id: 1, body: 'Hello', fromLoggedUser: true, createdAt: '2024-12-11 03:45 PM'),
    Message(id: 2, body: 'Hi there!', fromLoggedUser: false, createdAt: '2024-12-11 03:46 PM'),
    // 添加更多消息...
  ];

  late ScrollController scrollController;

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chat Screen Example'),
      ),
      body: SafeArea(
        child: Center(
          child: InkWell(
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                return ChatScreen(
                  messages: messages,
                  scrollController: scrollController,
                  otherUserName: 'Mohamed Abd El.Gwad',
                  unreadMsgRealTime: 2,
                  textHint: 'Enter your message',
                  otherUserImage: 'https://i1.sndcdn.com/artworks-WLuQqAGQXmbnwKVO-SG8o2Q-t500x500.jpg',
                  onSubmitMessage: (msg) {
                    messages.insert(
                      0,
                      Message(
                        id: messages.length + 1,
                        body: msg,
                        fromLoggedUser: true,
                        createdAt: DateTime.now().toString()
                      )
                    );
                    setState(() {});
                  },
                );
              }));
            },
            child: const Text('Navigate to chat screen'),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含聊天屏幕的应用程序。点击“Navigate to chat screen”文本后，将导航到一个带有预定义消息列表的聊天界面，并允许用户发送新消息。