Flutter聊天气泡插件bubble的使用

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

Flutter聊天气泡插件bubble的使用

简介

Bubble 是一个Flutter插件，用于创建类似Whatsapp等聊天应用中的气泡效果。它可以帮助开发者快速构建美观且功能丰富的聊天界面。

Pub GitHub stars

示例

以下是Bubble的基本用法和一些配置选项的示例：

基本用法

Bubble(
  child: Text('Hello, World!'),
),

颜色配置

Bubble(
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TODAY', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),

Bubble(
  margin: BubbleEdges.only(top: 10),
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),

Bubble(
  margin: BubbleEdges.only(top: 10),
  child: Text('Hi, developer!'),
),

气泡尖角(nip)配置

Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),

Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),

Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.rightBottom,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),

Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.leftBottom,
  child: Text('Hi, developer!'),
),

Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.no,
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TOMORROW', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),

对齐方式(alignment)配置

Bubble(
  alignment: Alignment.center,
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TODAY', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),

Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),

Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),

圆角半径(radius)配置

Bubble(
  margin: BubbleEdges.only(top: 10),
  radius: Radius.circular(20.0),
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),

Bubble(
  margin: BubbleEdges.only(top: 10),
  radius: Radius.circular(20.0),
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),

示例代码

下面是一个完整的示例代码，展示了如何在Flutter项目中使用Bubble插件来创建一个简单的聊天界面。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const title = 'Bubble Demo';

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: title,
        theme: ThemeData(
          primarySwatch: Colors.teal,
        ),
        home: const MyHomePage(
          title: title,
        ),
      );
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const styleSomebody = BubbleStyle(
    nip: BubbleNip.leftCenter,
    color: Colors.white,
    borderColor: Colors.blue,
    borderWidth: 1,
    elevation: 4,
    margin: BubbleEdges.only(top: 8, right: 50),
    alignment: Alignment.topLeft,
  );

  static const styleMe = BubbleStyle(
    nip: BubbleNip.rightCenter,
    color: Color.fromARGB(255, 225, 255, 199),
    borderColor: Colors.blue,
    borderWidth: 1,
    elevation: 4,
    margin: BubbleEdges.only(top: 8, left: 50),
    alignment: Alignment.topRight,
  );

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          color: Colors.yellow.withAlpha(64),
          child: ListView(
            padding: const EdgeInsets.all(8),
            children: [
              Bubble(
                alignment: Alignment.center,
                color: const Color.fromARGB(255, 212, 234, 244),
                borderColor: Colors.black,
                borderWidth: 2,
                margin: const BubbleEdges.only(top: 8),
                child: const Text(
                  'TODAY',
                  style: TextStyle(fontSize: 10),
                ),
              ),
              Bubble(
                style: styleSomebody,
                child: const Text(
                    'Hi Jason. Sorry to bother you. I have a queston for you.'),
              ),
              Bubble(
                style: styleMe,
                child: const Text("What's up?"),
              ),
              Bubble(
                style: styleSomebody,
                child:
                    const Text("I've been having a problem with my computer."),
              ),
              Bubble(
                style: styleSomebody,
                margin: const BubbleEdges.only(top: 4),
                showNip: false,
                child: const Text('Can you help me?'),
              ),
              Bubble(
                style: styleMe,
                child: const Text('Ok'),
              ),
              Bubble(
                style: styleMe,
                showNip: false,
                margin: const BubbleEdges.only(top: 4),
                child: const Text("What's the problem?"),
              ),
            ],
          ),
        ),
      );
}

通过以上代码，您可以创建一个包含多种样式和配置的聊天气泡界面。希望这些信息能帮助您更好地理解和使用Bubble插件！如果有任何问题或需要进一步的帮助，请随时提问。


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter应用中使用bubble插件来创建聊天气泡的示例代码。bubble插件是一个流行的Flutter包，用于创建类似于聊天应用的消息气泡。

首先，你需要在pubspec.yaml文件中添加bubble依赖：

dependencies:
  flutter:
    sdk: flutter
  bubble: ^2.0.0  # 请检查最新版本号并替换

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

接下来，我们创建一个简单的聊天界面。以下是一个完整的示例代码，展示如何使用bubble插件：

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

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

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

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Screen'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView.builder(
          itemCount: messages.length,
          itemBuilder: (context, index) {
            return MessageBubble(
              sender: messages[index].sender,
              text: messages[index].text,
              isMe: messages[index].isMe,
              alignment: messages[index].isMe ? Alignment.topRight : Alignment.topLeft,
            );
          },
        ),
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          shape: BoxShape.circular,
          borderRadius: BorderRadius.circular(30),
        ),
        child: Row(
          children: <Widget>[
            Expanded(
              child: TextField(
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Type a message...',
                ),
                onChanged: (value) {
                  // Handle text input
                },
              ),
            ),
            IconButton(
              icon: Icon(Icons.send),
              onPressed: () {
                // Handle send button press
                // Add new message to the list and update state (if stateful widget)
              },
            ),
          ],
        ),
      ),
    );
  }
}

class Message {
  final String sender;
  final String text;
  final bool isMe;

  Message({required this.sender, required this.text, required this.isMe});
}

List<Message> messages = [
  Message(sender: 'Alice', text: 'Hello!', isMe: false),
  Message(sender: 'Bob', text: 'Hi there!', isMe: true),
  Message(sender: 'Alice', text: 'How are you?', isMe: false),
  Message(sender: 'Bob', text: 'I am good, thanks!', isMe: true),
];

class MessageBubble extends StatelessWidget {
  final String sender;
  final String text;
  final bool isMe;
  final Alignment alignment;

  MessageBubble({required this.sender, required this.text, required this.isMe, required this.alignment});

  @override
  Widget build(BuildContext context) {
    return Positioned(
      alignment: alignment,
      child: Bubble(
        nip: Nip.left, // Change based on isMe
        color: isMe ? Colors.blueAccent : Colors.grey[300]!,
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                sender,
                style: TextStyle(fontSize: 12.0, color: Colors.black54),
              ),
              SizedBox(height: 5.0),
              Text(
                text,
                style: TextStyle(fontSize: 16.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注意：

  1. 在这个示例中，我们创建了一个简单的聊天屏幕，其中包含消息列表和文本输入栏。
  2. Message类用于存储消息数据，包括发送者、文本和是否是当前用户发送的消息。
  3. MessageBubble是一个自定义小部件，使用Bubble插件来创建消息气泡。根据消息的发送者，我们调整气泡的对齐方式和nip（箭头）的方向。
  4. ListView.builder用于动态构建消息列表。
  5. 文本输入栏和发送按钮位于屏幕底部。

你可以根据需要进一步自定义和扩展这个示例，例如添加时间戳、头像、消息状态（已发送、已读等）等。

回到顶部