Here’s the code that shows chat messages on certain flutter screen. This I have used in the audio and video chat app. It also detects if you are passing image or text.
Every time a message is sent or user types in, and clicks on the send button, ChatRightList is get called, of course, this text content is wrapped using Msgcontent, this is passed to ChatRightList as a parameter.
Do remember, every message is gone through firebase. If you want to know more about visit video chat link.
Widget ChatRightList(Msgcontent item){
var imagePath=null;
if(item.type=="image"){
imagePath=item.content?.replaceAll("http://localhost/", SERVER_API_URL);
}
return Container(
padding: EdgeInsets.symmetric(vertical: 10.w, horizontal: 20.w),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 250.w,
minHeight: 40.w
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
color: AppColors.primaryElement,
borderRadius: BorderRadius.all(Radius.circular(5.w))
),
padding: EdgeInsets.only(
top:10.w, bottom: 10.w,left: 10.w, right: 10.w
),
child: item.type=="text"?Text("${item.content}",
style: TextStyle(
fontSize: 14.sp,
color: AppColors.primaryElementText
),
)
:ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 90.w
),
child: GestureDetector(
child: CachedNetworkImage(
imageUrl: imagePath!,
),
onTap: (){
},
),
)
)
],
),
)
],
),
);
}Make sure that you pass Msgcontent which contains actual message data.