Flutter 自定义聊天气泡

老铁记得转发，猫哥会呈现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/404904528

原文

https://medium.com/flutterdevs/custom-chat-bubble-in-flutter-6aa7d24fc683

代码

https://github.com/flutter-devs/flutter_custom_chat_bubble

参考

正文

对话聊天应用程序显示聊天中的消息会在强烈的阴影背景下上升。现代聊天应用程序显示的聊天气泡的斜率取决于气泡在屏幕上的位置。在 flutter 应用中，有时需要使用聊天气泡。然而，将一个库用于一个特别无关紧要的任务并不好。

在这个博客，我们将探索自定义聊天气泡 flutter。我们将看到如何实现一个自定义聊天泡泡的演示程序，以及如何使一个自定义聊天泡泡最简单的不使用任何第三方库在您的 flutter 应用程序。

配置 assets

第一步: 添加 assets

将 assets 添加到 pubspec.yaml 文件。

1 2	assets: - assets/images/

第二步: 在应用程序的根目录中运行 flutter packages get 。

如何实现 dart 文件中的代码:

你需要分别在你的代码中实现它:

在 lib 文件夹中创建一个名为 custom_shape.dart 的新 dart 文件。

首先，创建自定义形状自定义 CustomPainter 类。这将用于在聊天气泡结束时绘制自定义形状。用户可以在自定义形状中添加任何颜色。

import 'package:flutter/material.dart';

class CustomShape extends CustomPainter {
  final Color bgColor;

  CustomShape(this.bgColor);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = bgColor;

    var path = Path();
    path.lineTo(-5, 0);
    path.lineTo(0, 10);
    path.lineTo(5, 0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

在 lib 文件夹中创建一个名为 send_message_screen.dart 的新 dart 文件。

首先，我们将创建一个构造器的最终字符串消息。

final String message;
const SentMessageScreen({
  Key key,
  @required this.message,
}) : super(key: key);

在构建方法中，我们将返回 Padding()。在内部，我们将添加 Row() 小部件。在这个小部件中，我们将添加 mainAxisAlignment 并添加 messageTextGroup。我们将定义下面的代码。

return Padding(
  padding: EdgeInsets.only(right: 18.0, left: 50, top: 15, bottom: 5),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      SizedBox(height: 30),
      messageTextGroup,
    ],
  ),
);

我们将深入定义 messageTextGroup:

我们将创建一个最终的 messageTextGroup 等于 Flexible ()小部件。在这个小部件中，我们将添加 Row ()小部件。在内部，添加主轴对齐是结束，并启动了跨轴对齐。在儿童内部，我们将添加装饰框的 Conatiner 和添加颜色，边框半径。它的子属性，我们将添加一个可变消息文本。我们将添加 CustomPaint () ，我们将使用上面的画家类是带颜色的 CustomShape。

final messageTextGroup = Flexible(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Flexible(
          child: Container(
            padding: EdgeInsets.all(14),
            decoration: BoxDecoration(
              color: Colors.cyan[900],
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(18),
                bottomLeft: Radius.circular(18),
                bottomRight: Radius.circular(18),
              ),
            ),
            child: Text(
              message,
              style: TextStyle(color: Colors.white, fontSize: 14),
            ),
          ),
        ),
        CustomPaint(painter: CustomShape(Colors.cyan[900])),
      ],
    ));

在 lib 文件夹中创建一个名为 received_message_screen.dart 的新 dart 文件。

类似地，我们现在可以创建一个接收到的消息屏幕。我们只需要翻转定制的形状，并把它放在开始，而不是结束。我们将使用转换小部件翻转自定义形状小部件。在转换小部件中，我们将添加对齐为中心，转换为 Matrix4.rotationY(math. pi)。

final messageTextGroup = Flexible(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Transform(
          alignment: Alignment.center,
          transform: Matrix4.rotationY(math.pi),
          child: CustomPaint(
            painter: CustomShape(Colors.grey[300]),
          ),
        ),
        Flexible(
          child: Container(
            padding: EdgeInsets.all(14),
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(18),
                bottomLeft: Radius.circular(18),
                bottomRight: Radius.circular(18),
              ),
            ),
            child: Text(
              message,
              style: TextStyle(color: Colors.black, fontSize: 14),
            ),
          ),
        ),
      ],
    ));

在 lib 文件夹中创建一个名为 home_page.dart 的新 dart 文件。

在正文中，我们将添加一个 Container ()小部件。在里面，添加装饰框和添加图像。它是子属性，我们可以在 ListView ()中同时添加发送和接收消息屏幕。

Container(
  decoration: BoxDecoration(
      image: DecorationImage(
          image: AssetImage("assets/bg_chat.jpg"),
          fit: BoxFit.cover)),
  child: ListView(
    children: [
      SentMessageScreen(message: "Hello"),
      ReceivedMessageScreen(message: "Hi, how are you"),
      SentMessageScreen(message: "I am great how are you doing"),
      ReceivedMessageScreen(message: "I am also fine"),
      SentMessageScreen(message: "Can we meet tomorrow?"),
      ReceivedMessageScreen(message: "Yes, of course we will meet tomorrow"),
    ],
  ),
),

当我们运行应用程序时，我们应该得到屏幕的输出，就像下面的屏幕截图一样。

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_custom_chat_bubble/received_message_screen.dart';
import 'package:flutter_custom_chat_bubble/send_messsage_screen.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.cyan[900],
        automaticallyImplyLeading: false,
        title: Text(widget.title),
      ),
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/bg_chat.jpg"),
                fit: BoxFit.cover)),
        child: ListView(
          children: [
            SentMessageScreen(message: "Hello"),
            ReceivedMessageScreen(message: "Hi, how are you"),
            SentMessageScreen(message: "I am great how are you doing"),
            ReceivedMessageScreen(message: "I am also fine"),
            SentMessageScreen(message: "Can we meet tomorrow?"),
            ReceivedMessageScreen(message: "Yes, of course we will meet tomorrow"),
          ],
        ),
      ),
    );
  }
}