How to make a chat bubble like WhatsApp's chat bubble in Flutter?

Question

I'm going to make a chat bubble like WhatsApp's chat bubble. However, things are not yet done. What I need to do is read an image from a message containing a URL.

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

Expected results:

Actual results:

My code:

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,
              ),
            ),
          ),
        ],
      ),
    ),
  ],
),

If you need more info feel free to leave a comment!

How to make a chat bubble like WhatsApp's chat bubble in Flutter? I would appreciate any help. Thank you in advance!

Answer 1

All you need is to detect if there is a URL in the text and preview the URL. You can use the any_link_preview package for URL preview.