如何在Flutter中制作一个像WhatsApp的聊天气泡一样的聊天气泡？

Question

我要制作一个聊天气泡，就像 WhatsApp 的聊天气泡一样。 然而，事情还没有完成。 我需要做的是从包含 URL 的消息中读取图像。

URL: https://www.bloomberg.com/news/articles/2022-11-15/russia-expected-to-agree-to-extend-black-sea-grain-export-deal

预期成绩：

实际结果：

我的代码：

Row(
  crossAxisAlignment: CrossAxisAlignment.end,
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Container(
      width: MediaQuery.of(context).size.width * 0.75,
      padding: const EdgeInsets.all(5.0),
      decoration: const BoxDecoration(
        color: Colors.amber,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(15.0),
          topRight: Radius.circular(15.0),
          bottomLeft: Radius.circular(0.0),
          bottomRight: Radius.circular(15.0),
        ),
      ),
      child: Column(
        children: [
          Align(
            alignment: Alignment.centerLeft,
            child: Text(
              name,
              style: const TextStyle(
                color: Color.fromARGB(255, 50, 150, 150),
                fontSize: 12.5,
              ),
            ),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Linkify(
              onOpen: (link) async {
                if (await canLaunchUrl(
                  Uri.parse(link.url),
                )) {
                  await launchUrl(
                      Uri.parse(link.url));
                } else {
                  throw "Could not launch $link";
                }
              },
              text: message,
              style: const TextStyle(
                color: Color.fromARGB(255, 50, 150, 150),
                fontSize: 20.0,
              ),
              linkStyle: const TextStyle(
                fontSize: 20.0,
                color: Colors.blue,
                decoration: TextDecoration.underline,
              ),
            ),
          ),
          Align(
            alignment: Alignment.centerRight,
            child: Text(
              timeago.format(sentAt.toDate()),
              style: const TextStyle(
                color: Color.fromARGB(255, 50, 150, 150),
                fontSize: 15.0,
              ),
            ),
          ),
        ],
      ),
    ),
  ],
),

如果您需要更多信息，请随时发表评论！

如何在Flutter中制作一个像WhatsApp的聊天气泡一样的聊天气泡？ 我将不胜感激任何帮助。 先感谢您！

Answer 1

只需要检测文本中是否有URL，预览URL即可。URL预览可以使用any_link_preview package。