Flutter聊天界面插件vengamo_chat_ui的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter聊天界面插件vengamo_chat_ui的使用

介绍

Vengamo Chat UI 是一个 Flutter 项目，它结合了 WhatsApp、Telegram 和 Facebook Messenger 的用户界面元素，提供了一个流畅且直观的聊天体验。该插件支持自定义主题、图片和音频文件发送、消息回复等功能。

功能特性

  • 熟悉的 UI 元素：来自 WhatsApp、Telegram 和 Facebook Messenger 的界面元素。
  • 可定制的主题：个性化聊天界面的主题。
  • 图片文件支持：发送和显示图片。
  • 音频文件支持：发送和播放音频文件。
  • 消息回复：支持消息回复功能。

即将推出的功能

  • 视频文件支持：未来版本将支持视频文件的发送和播放。

屏幕截图

屏幕截图

VengamoChatUI 属性

VengamoChatUI 组件提供了多个属性来定制聊天界面，具体可以参考官方文档。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 项目中使用 vengamo_chat_ui 插件：

import 'package:flutter/material.dart';
import 'package:vengamo_chat_ui/vengamo_chat_ui.dart';
import 'package:vengamo_chat_ui/theme/app_color.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'James Wagon',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      themeMode: ThemeMode.dark,
      home: const VengamoChatScreen(),
    );
  }
}

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

  String getTime() {
    int hour = DateTime.now().hour;
    int min = DateTime.now().minute;
    String hRes = hour <= 9 ? '0$hour' : hour.toString();
    String mRes = min <= 9 ? '0$min' : min.toString();
    return '$hRes:$mRes';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('James Wagon'),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: const BoxDecoration(
          color: AppColors.backgroundColor,
        ),
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 2),
            child: Column(
              children: [
                // 音频消息
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: true,
                  isNextMessageFromSameSender: false,
                  time: getTime(),
                  isAudio: true,
                  audioSource: 'http://www.uscis.gov/files/nativedocuments/Track%2093.mp3',
                  timeLabelColor: AppColors.iconColor,
                  pointer: true,
                  ack: Image.asset(
                    'assets/images/seen.png',
                    height: 12,
                    width: 12,
                  ),
                ),
                const SizedBox(height: 10),

                // 回复消息
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: false,
                  isNextMessageFromSameSender: false,
                  time: getTime(),
                  isAudio: true,
                  messageReply: Text("Why did the sun never want to join"),
                  audioSource: 'https://weellu.s3.amazonaws.com/f8f34cbe-fba4-4935-8a0a-718cd2192615.mp3',
                  timeLabelColor: AppColors.iconColor,
                  pointer: true,
                  ack: Image.asset(
                    'assets/images/seen.png',
                    height: 12,
                    width: 12,
                  ),
                ),
                const SizedBox(height: 10),

                // 图片消息
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: false,
                  timeLabelColor: AppColors.iconColor,
                  isNextMessageFromSameSender: false,
                  imgUrl: 'https://cdn.wallpapersafari.com/28/2/vrIzJD.jpg',
                  time: getTime(),
                  messageReply: Text("It's Crazy time fly fast"),
                  pointer: true,
                  ack: Image.asset(
                    'assets/images/seen.png',
                    height: 12,
                    width: 12,
                  ),
                ),
                const SizedBox(height: 10),

                // 文本消息
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: true,
                  isNextMessageFromSameSender: false,
                  time: getTime(),
                  timeLabelColor: AppColors.softBlackcolor,
                  text: const Text(
                    "Yolla ✋ Hey, guess what?",
                    style: TextStyle(fontSize: 16),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  pointer: true,
                  ack: const Icon(
                    Icons.check,
                    color: AppColors.iconColor, // 自定义颜色
                    size: 13, // 自定义大小
                  ),
                ),
                const SizedBox(height: 10),

                // 连续消息
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: true,
                  isNextMessageFromSameSender: true,
                  time: getTime(),
                  timeLabelColor: AppColors.softBlackcolor,
                  text: const Text(
                    "What?",
                    style: TextStyle(fontSize: 16),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  pointer: false,
                  ack: Image.asset(
                    'assets/images/double_tick_grey.png',
                    height: 13,
                    width: 13,
                  ),
                ),
                const SizedBox(height: 10),

                // 更多文本消息
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: false,
                  isNextMessageFromSameSender: false,
                  time: getTime(),
                  text: const Text(
                    "I invented a new word!.",
                    style: TextStyle(fontSize: 16),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  pointer: true,
                  ack: Image.asset(
                    'assets/images/double_tick_green.png',
                    height: 14,
                    width: 15,
                  ),
                ),
                const SizedBox(height: 5),

                // 图片带文字说明
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  timeLabelColor: AppColors.darkModeBackgroundColor,
                  isSender: true,
                  isNextMessageFromSameSender: false,
                  imgUrl: 'https://wallpaperaccess.com/full/1248267.jpg',
                  caption: const Text("Why did the sun never want to join the galaxy's talent show? Because it didn't want to be a star performer, it preferred to shine solo", style: TextStyle(fontSize: 14)),
                  messageReply: Text("Pour récupérer vos conversations WhatsApp, il vous suffit de désinstaller et réinstaller l'application. À l'ouverture, celle-ci vous demandera de vérifier votre numéro de téléphone et vous"),
                  time: getTime(),
                  pointer: true,
                  ack: Image.asset(
                    'assets/images/seen.png',
                    height: 12,
                    width: 12,
                  ),
                ),
                const SizedBox(height: 10),

                // 更多文本消息
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: false,
                  isNextMessageFromSameSender: true,
                  time: getTime(),
                  text: const Text(
                    "Hold on, a sec, let me pick this call?",
                    style: TextStyle(fontSize: 16),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  pointer: false,
                  ack: Image.asset(
                    'assets/images/double_tick_green.png',
                    height: 14,
                    width: 15,
                  ),
                ),
                const SizedBox(height: 10),

                // 更多文本消息
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: false,
                  isNextMessageFromSameSender: true,
                  time: getTime(),
                  text: const Text(
                    "Plagiarism! 💫 😂 ",
                    style: TextStyle(fontSize: 16),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  pointer: false,
                  ack: Image.asset(
                    'assets/images/double_tick_green.png',
                    height: 14,
                    width: 15,
                  ),
                ),
                const SizedBox(height: 10),

                // 更多文本消息
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: true,
                  isNextMessageFromSameSender: false,
                  time: getTime(),
                  text: const Text(
                    "Plagiarism!? 😂.",
                    style: TextStyle(fontSize: 16),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  pointer: true,
                  ack: Image.asset(
                    'assets/images/sent.png',
                    height: 12,
                    width: 12,
                  ),
                ),
                const SizedBox(height: 10),

                // 更多文本消息
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: true,
                  isNextMessageFromSameSender: true,
                  time: getTime(),
                  text: const Text(
                    "Thanks! I thought you'd like it 🤪",
                    style: TextStyle(fontSize: 16),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  pointer: false,
                  ack: Image.asset(
                    'assets/images/seen.png',
                    height: 12,
                    width: 12,
                  ),
                ),
                const SizedBox(height: 10),

                // 带回复的消息
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: true,
                  isNextMessageFromSameSender: true,
                  messageReply: Text("Pour récupérer vos conversations WhatsApp, il vous suffit de désinstaller et réinstaller l'application. À l'ouverture, celle-ci vous demandera de vérifier votre numéro de téléphone et vous"),
                  time: getTime(),
                  text: const Text(
                    "Why don't scientists!",
                    style: TextStyle(fontSize: 16),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  pointer: false,
                  ack: Image.asset(
                    'assets/images/seen.png',
                    height: 12,
                    width: 12,
                  ),
                ),
                const SizedBox(height: 10),

                // 更多文本消息
                VengamoChatUI(
                  textStyle: const TextStyle(fontSize: 16),
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: false,
                  isNextMessageFromSameSender: false,
                  time: getTime(),
                  text: const Text(
                    "check this out! Why do",
                    style: TextStyle(fontSize: 16),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  pointer: true,
                  messageReply: Text("You look amazing bros, hear more jokes or have any other questions, feel free to ask.😂🤪"),
                  ack: Image.asset(
                    'assets/images/seen.png',
                    height: 12,
                    width: 12,
                  ),
                ),
                const SizedBox(height: 5),

                // 图片带文字说明
                VengamoChatUI(
                  textStyle: const TextStyle(fontSize: 14),
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: true,
                  isNextMessageFromSameSender: false,
                  imgUrl: 'https://cache.marieclaire.fr/data/photo/w1000_ci/1ju/sean-connery-james-bond.jpg',
                  messageReply: const Text("Why did the sun never want to join the galaxy's talent show? Because it didn't want to be a star performer, it preferred to shine solo, il vous suffit de désinstaller et réinstaller l'application. À l'ouverture, celle-ci vous demandera de vérifier votre numéro de téléphone et vous, By using the adjustHeight function, you can ensure consistent adjustments for both minHeight and maxHeight without causing non-normalized constraints"),
                  time: getTime(),
                  pointer: true,
                  ack: Image.asset(
                    'assets/images/seen.png',
                    height: 12,
                    width: 12,
                  ),
                ),
                const SizedBox(height: 10),

                // 图片消息
                VengamoChatUI(
                  senderBgColor: AppColors.softGreenColor,
                  receiverBgColor: AppColors.white,
                  isSender: true,
                  isNextMessageFromSameSender: false,
                  imgUrl: 'https://i.pinimg.com/1200x/19/3f/89/193f898bc73a09e14685f915a3989504.jpg',
                  time: getTime(),
                  timeLabelColor: AppColors.iconColor,
                  caption: const Text("Ola my bros", style: TextStyle(fontSize: 14)),
                  pointer: false,
                  ack: Image.asset(
                    'assets/images/seen.png',
                    height: 12,
                    width: 12,
                  ),
                ),
              ],
            ),
          ),
        ),
      ), // 使用 Vengamo Chat UI 组件
    );
  }
}

使用步骤

  1. 确保已安装 Flutter：请确保你已经安装了 Flutter，并且可以在命令行中运行 flutter 命令。如果未安装，请参考 Flutter 官方文档 进行安装。

  2. 编辑 pubspec.yaml 文件：打开你的项目的 pubspec.yaml 文件，并在 dependencies 部分添加 vengamo_chat_ui 依赖项：

    dependencies:
  vengamo_chat_ui: ^1.2.5

    请根据需要替换版本号。

  3. 保存并获取依赖：保存 pubspec.yaml 文件后，在项目根目录下运行以下命令以获取依赖项：

    flutter pub get

  4. 导入 Vengamo Chat UI：在 Dart 代码中导入 vengamo_chat_ui 包：

    import 'package:vengamo_chat_ui/vengamo_chat_ui.dart';

更多关于Flutter聊天界面插件vengamo_chat_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter聊天界面插件vengamo_chat_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成和使用vengamo_chat_ui插件来创建一个聊天界面的示例代码。vengamo_chat_ui是一个用于快速构建聊天界面的Flutter插件。以下步骤将展示如何设置和使用该插件。

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  vengamo_chat_ui: ^最新版本号 # 请替换为最新的版本号

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

步骤 2: 导入插件

在你的聊天界面Dart文件中导入vengamo_chat_ui：

import 'package:vengamo_chat_ui/vengamo_chat_ui.dart';

步骤 3: 配置聊天界面

接下来，你需要配置聊天界面的基本设置。以下是一个简单的示例代码，展示如何使用VengamoChatUI来构建聊天界面：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chat App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  // 示例消息数据
  List<ChatMessage> messages = [
    ChatMessage(
      id: '1',
      sender: ChatUser(id: 'user1', name: 'Alice', avatarUrl: 'https://example.com/alice.jpg'),
      text: 'Hello!',
      timestamp: DateTime.now().subtract(Duration(minutes: 5)),
      type: ChatMessageType.text,
    ),
    ChatMessage(
      id: '2',
      sender: ChatUser(id: 'user2', name: 'Bob', avatarUrl: 'https://example.com/bob.jpg'),
      text: 'Hi Alice!',
      timestamp: DateTime.now().subtract(Duration(minutes: 3)),
      type: ChatMessageType.text,
    ),
    // 可以添加更多消息...
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: VengamoChatUI(
        messages: messages,
        onLoadMore: () async {
          // 这里可以添加加载更多消息的逻辑
          // 例如从服务器获取更多消息并更新messages列表
        },
        onSendMessage: (ChatMessage message) {
          // 这里添加发送消息的逻辑
          // 例如将消息发送到服务器并更新messages列表
          setState(() {
            messages.add(message);
          });
        },
        user: ChatUser(id: 'user1', name: 'Alice', avatarUrl: 'https://example.com/alice.jpg'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 打开输入框
          // 通常这个按钮会触发聊天输入框的显示
        },
        tooltip: 'Send message',
        child: Icon(Icons.send),
      ),
    );
  }
}

注意事项

  1. 消息数据：messages列表应该包含聊天中的所有消息。这些消息可以是文本、图片、视频等类型，具体取决于ChatMessageType。

  2. 加载更多消息：onLoadMore回调用于当用户滚动到底部时加载更多消息。你可以在这里实现从服务器获取更多消息的逻辑。

  3. 发送消息：onSendMessage回调用于处理用户发送的新消息。你可以在这里实现将消息发送到服务器的逻辑，并更新本地messages列表。

  4. 用户信息：user属性用于表示当前用户的信息，包括用户ID、名称和头像URL。

  5. 输入框：VengamoChatUI通常会自动处理输入框的显示和隐藏，但你可能需要根据你的应用需求自定义这部分逻辑。

通过上述步骤，你应该能够在Flutter应用中成功集成并使用vengamo_chat_ui插件来创建一个功能齐全的聊天界面。如果你需要更多高级功能或自定义样式，请参考vengamo_chat_ui的官方文档。

回到顶部