Home > OS >  How do i hide contents in a list tile conditionally in Flutter?
How do i hide contents in a list tile conditionally in Flutter?

Time:09-30

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 Screen Layout

Thank You!

CodePudding user response:

When you want to return empty widget(hide something) just use SizedBox:

if (message.roomType.toString() == "group"){
   return SizedBox();
}else{
   return child...
}
  • Related