I have a list tile displaying different list, which includes Direct messages ( DM ) and Group chat messages.
I am trying to hide the group chat messages in the list view on the condition message.roomType.toString() == "group"
And also show Group chat messages and hide Direct Messages in another similar widget on same similar condition
Is there any way i can go about it?
NB: i have tried using
if (message.roomType.toString() == "group"){
return;
}
else{
return child...
}
but it throws an error. Below is my code snippet for the widget.
import 'dart:convert';
import 'package:afri_pro/components/alert_box.dart';
import 'package:afri_pro/includes.dart';
import 'package:afri_pro/models/latest_messages_model.dart';
import 'package:afri_pro/modules/messages/controllers/chat_controller.dart';
import 'package:afri_pro/responsive/responsive.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:get/get.dart';
class LatestChatMessages extends StatelessWidget {
const LatestChatMessages({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
MessagesController messagesController = Get.find();
if (messagesController.latestMessages.isEmpty) {
return Center(
child: ListView(
shrinkWrap: true,
children: const [
Icon(
CupertinoIcons.chat_bubble,
size: 80,
),
SizedBox(
height: 10,
),
Center(child: Text("You have no messages here"))
],
),
);
}
return GetBuilder<MessagesController>(
builder: (controller) => ListView.builder(
itemCount: controller.latestMessages.length,
itemBuilder: (context, index) {
if (jsonDecode(
jsonEncode(controller.latestMessages[index]))['room_link'] ==
null) {
return Container();
}
var message = LatestMessagesModelMessages.fromJson(
jsonDecode(jsonEncode(controller.latestMessages[index])));
return Slidable(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
border: Border(
top: BorderSide(
width: 0.5,
color: Get.isDarkMode
? AppColors.advertDarkColor
: AppColors.advertLightColor),
),
),
child: ListTile(
onTap: () async {
var roomName = message.roomType.toString() == "group"
? "#" + message.roomName!
: message.roomName!;
if (Responsive.isMobile(context)) {
controller.setSelectedRoom(
message.roomId, roomName, message.roomType);
await Get.toNamed("chatDetailsScreen");
controller.leaveRoom();
} else {
controller.leaveRoom();
controller.setSelectedRoom(
message.roomId, roomName, message.roomType);
}
},
title: Text(message.roomType.toString() == "group"
? "#" + message.roomName!
: message.roomName!),
subtitle: Row(
children: [
controller.showReadReceipt(message.message!.status!,
message.message!.seen!, message.message!.type!,
color: AppColors.secondary),
if (message.message!.image != null)
const Icon(
Icons.camera_alt,
size: 15,
),
if (message.message!.type!.contains("bot"))
const Icon(
Icons.android_sharp,
size: 15,
),
const SizedBox(
width: 5,
),
Flexible(
child: Text(
message.message!.message == null
? ""
: message.message!.type!.contains("bot")
? messagesController.getBotMessage(
message.message!.message!,
message.message!.senderId,
message.message!.firstName)
: message.message!.message!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
)),
],
),
trailing: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(message.message!.sent!),
const SizedBox(
height: 5,
),
SizedBox(
width: 80,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
if (message.muted == 'true')
const Icon(Icons.volume_off),
if (message.message!.unreadMessages! > 0)
Container(
height: 25,
width: 25,
decoration: BoxDecoration(
color: AppColors.secondary,
borderRadius: BorderRadius.circular(15),
),
child: Center(
child: Text(
message.message!.unreadMessages! > 10
? "10+"
: message.message!.unreadMessages
.toString(),
style: const TextStyle(
color: Colors.white, fontSize: 12),
),
),
),
],
),
)
// controller.showReadReceipt(message.message!.status, message.message!.seen, message.message!.type)
],
),
),
),
endActionPane: ActionPane(
motion: const BehindMotion(),
children: [
SlidableAction(
label: message.muted == 'true' ? 'Unmute' : "Mute",
backgroundColor: AppColors.secondary,
icon: message.muted == 'true'
? Icons.notifications_active
: Icons.notifications_off,
onPressed: (BuildContext context) {
controller.toggleMute(message.roomId, context);
},
),
if (message.roomType.toString() == "group")
SlidableAction(
label: 'Leave',
backgroundColor: Colors.red,
icon: Icons.delete,
onPressed: (BuildContext context) {
Alert().showBottomSheetSingleButton(context, "Attention",
"Are you sure you want to leave this topic?",
showCancelBtn: true, onPressed: () {
controller.leaveTopic(message.roomId, context);
});
},
),
if (message.roomType.toString() == "group")
SlidableAction(
label: 'Invite',
backgroundColor: Colors.blueAccent,
icon: Icons.share,
onPressed: (BuildContext context) {
messagesController.shareLink(context, message.roomLink!);
},
),
],
),
);
},
),
);
}
}Below is the screenshot of the UI 
Thank You!
>Solution :
When you want to return empty widget(hide something) just use SizedBox:
if (message.roomType.toString() == "group"){
return SizedBox();
}else{
return child...
}