Flutter 自定义聊天气泡

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-frjkn3p5-1626132866799)(https://ducafecat.tech/2021/07/13/translation/custom-chat-bubble-in-flutter/2021-07-13-07-26-06.png)]

老铁记得 转发 ，猫哥会呈现更多 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

参考

• https://pub.flutter-io.cn/packages/get#reactive-state-manager
• https://dart.dev/guides/language/extension-methods

正文

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ij3F5m0N-1626132866800)(https://ducafecat.tech/2021/07/13/translation/custom-chat-bubble-in-flutter/2021-07-13-07-13-02.png)]

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

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

配置 assets

• 第一步: 添加 assets

将 assets 添加到 pubspec.yaml 文件。

assets:
  - assets/images/

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

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

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

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

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

import 'package:flutter/material.dart';

class CustomS