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.
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!
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.