Flutter聊天气泡插件awesome_chat_bubble的使用

Flutter聊天气泡插件awesome_chat_bubble的使用

一个Flutter插件，提供了可自定义的聊天气泡小部件。

安装 💻

为了开始使用Awesome Chat Bubble，您必须在您的机器上安装[Flutter SDK][flutter_install_link]。

通过以下命令安装：

flutter pub add awesome_chat_bubble

使用示例

下面是一个简单的示例，展示了如何使用AwesomeChatBubble来创建聊天气泡。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Awesome Chat Bubble Demo')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView(
            children: [
              // 发送者的聊天气泡
              AwesomeChatBubble(
                authorName: 'Alice',
                timestamp: '12:00 PM',
                message: 'Hello, how are you?',
                isSender: true,
                messageWidget: null,
                replayMessage: null,
                replayToName: null,
                replayIcon: null,
                tailType: TailType.standard,
                onMore: null,
                onMoreIcon: null,
                onMoreWidget: null,
              ),
              // 接收者的聊天气泡
              AwesomeChatBubble(
                authorName: 'Bob',
                timestamp: '12:05 PM',
                message: 'I am fine, thanks!',
                isSender: false,
                messageWidget: null,
                replayMessage: null,
                replayToName: null,
                replayIcon: null,
                tailType: TailType.standard,
                onMore: null,
                onMoreIcon: null,
                onMoreWidget: null,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

自定义属性

AwesomeChatBubble 提供了一些自定义属性，可以根据需求调整聊天气泡的样式。以下是这些属性的说明：

  • authorName: 聊天消息的作者名字。
  • timestamp: 聊天消息的时间戳。
  • message: 聊天消息的文本内容。
  • isSender: 是否为发送者（布尔值）。
  • messageWidget: 自定义消息小部件（可以为空）。
  • replayMessage: 回复的消息内容（可以为空）。
  • replayToName: 回复给谁的名字（可以为空）。
  • replayIcon: 回复图标（可以为空）。
  • tailType: 气泡尾部类型（标准或无尾）。
  • onMore: 更多功能的回调函数（可以为空）。
  • onMoreIcon: 更多功能图标（可以为空）。
  • onMoreWidget: 更多功能的小部件（可以为空）。

完整示例代码

下面是一个完整的示例代码，包含了上述所有属性的使用：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Awesome Chat Bubble Demo')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView(
            children: [
              // 发送者的聊天气泡
              AwesomeChatBubble(
                authorName: 'Alice',
                timestamp: '12:00 PM',
                message: 'Hello, how are you?',
                isSender: true,
                messageWidget: null,
                replayMessage: null,
                replayToName: null,
                replayIcon: null,
                tailType: TailType.standard,
                onMore: null,
                onMoreIcon: null,
                onMoreWidget: null,
              ),
              // 接收者的聊天气泡
              AwesomeChatBubble(
                authorName: 'Bob',
                timestamp: '12:05 PM',
                message: 'I am fine, thanks!',
                isSender: false,
                messageWidget: null,
                replayMessage: 'This is a reply message',
                replayToName: 'Alice',
                replayIcon: Icons.reply,
                tailType: TailType.standard,
                onMore: () {
                  print('More button clicked');
                },
                onMoreIcon: Icons.more_horiz,
                onMoreWidget: Container(
                  color: Colors.blue,
                  child: Text('More Widget'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


awesome_chat_bubble 是一个用于 Flutter 的插件，专门用于创建聊天气泡 UI。它提供了灵活且易于使用的方式来显示消息气泡，支持各种自定义选项，如背景颜色、边框、圆角、箭头位置等。

以下是 awesome_chat_bubble 的基本使用指南：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  awesome_chat_bubble: ^1.0.0  # 请检查最新版本

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

2. 导入包

在需要使用 awesome_chat_bubble 的 Dart 文件中导入该包：

import 'package:awesome_chat_bubble/awesome_chat_bubble.dart';

3. 使用 ChatBubble

ChatBubble 是 awesome_chat_bubble 的核心组件。你可以通过传递不同的参数来自定义聊天气泡的外观。

以下是一个简单的示例，展示如何在 Flutter 应用中使用 ChatBubble：

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

class ChatBubbleExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Bubble Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            ChatBubble(
              message: 'Hello, how are you?',
              isSender: true, // 设置为 true 表示发送者，false 表示接收者
              bubbleColor: Colors.blue,
              textColor: Colors.white,
              borderRadius: 20,
              tailType: TailType.right, // 设置气泡的箭头方向
            ),
            SizedBox(height: 16),
            ChatBubble(
              message: 'I am fine, thank you!',
              isSender: false,
              bubbleColor: Colors.grey[300],
              textColor: Colors.black,
              borderRadius: 20,
              tailType: TailType.left,
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: ChatBubbleExample(),
));
回到顶部