bubble_ui 是一个用于在 Flutter 中创建气泡聊天界面的插件。它提供了简单易用的 API，可以帮助你快速实现类似于聊天应用中的消息气泡效果。以下是如何使用 bubble_ui 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  bubble_ui: ^1.0.0  # 请根据实际情况使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 bubble_ui 包：

import 'package:bubble_ui/bubble_ui.dart';

3. 使用 Bubble 组件

你可以使用 Bubble 组件来创建消息气泡。以下是一个简单的示例：

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

class ChatScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: ListView(
        children: [
          // 发送的消息气泡
          Bubble(
            message: 'Hello, how are you?',
            isMe: true,
            color: Colors.blue,
          ),
          // 接收的消息气泡
          Bubble(
            message: 'I\'m fine, thank you!',
            isMe: false,
            color: Colors.grey,
          ),
        ],
      ),
    );
  }
}

4. Bubble 组件的参数

Bubble 组件支持以下主要参数：

• message: 消息内容，类型为 String。
• isMe: 布尔值，表示消息是否由当前用户发送。true 表示消息由当前用户发送，false 表示消息由对方发送。
• color: 气泡的背景颜色，类型为 Color。
• textStyle: 消息文本的样式，类型为 TextStyle。
• margin: 气泡的外边距，类型为 EdgeInsets。
• padding: 气泡的内边距，类型为 EdgeInsets。
• borderRadius: 气泡的圆角半径，类型为 BorderRadius。

5. 自定义气泡样式

你可以通过调整 Bubble 组件的参数来自定义气泡的样式。例如：

Bubble(
  message: 'This is a custom bubble!',
  isMe: true,
  color: Colors.green,
  textStyle: TextStyle(color: Colors.white, fontSize: 16),
  margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
  padding: EdgeInsets.all(15),
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(20),
    bottomRight: Radius.circular(20),
  ),
)

6. 完整示例

以下是一个完整的聊天界面示例：

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

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

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

class ChatScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: ListView(
        children: [
          Bubble(
            message: 'Hello, how are you?',
            isMe: true,
            color: Colors.blue,
          ),
          Bubble(
            message: 'I\'m fine, thank you!',
            isMe: false,
            color: Colors.grey,
          ),
          Bubble(
            message: 'What are you doing?',
            isMe: true,
            color: Colors.blue,
          ),
          Bubble(
            message: 'Just working on a Flutter project.',
            isMe: false,
            color: Colors.grey,
          ),
        ],
      ),
    );
  }
}