builder method

@override Widget builder(BuildContext context, ChatRoomViewModel viewModel, Widget? child)

A function that builds the UI to be shown from the ViewModel - Required

viewModel is the ViewModel passed in and child is the staticChildBuilder result

Implementation

@override
Widget builder(
  BuildContext context,
  ChatRoomViewModel viewModel,
  Widget? child,
) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.transparent,
      title: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            receiverMember.name,
            style: const TextStyle(color: Colors.black),
          ),
          StreamBuilder<DocumentSnapshot>(
              stream: FirebaseFirestore.instance
                  .collection('status')
                  .doc(receiverMember.userId)
                  .snapshots(),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  var userDoc = snapshot.data!;
                  var userData = userDoc.data();
                  bool isOnline = false;
                  String lastSeen = '';
                  if (userData is Map<String, dynamic>) {
                    isOnline = userData['isOnline'] ?? false;
                    if (userData['lastSeen'] != null) {
                      lastSeen = timeAgo(userData['lastSeen'].toDate());
                    } else {
                      lastSeen = '';
                    }
                  }
                  return Text(
                    isOnline ? 'Online' : lastSeen,
                    style: TextStyle(
                      color: isOnline ? Colors.green : Colors.grey,
                      fontSize: 12,
                    ),
                  );
                }
                return Container();
              })
        ],
      ),
    ),
    body: Stack(
      children: [
        Column(
          children: [
            Expanded(
                child: ListView.builder(
                    reverse: true,
                    itemCount: viewModel.messages.length,
                    itemBuilder: (context, index) {
                      return ChatRoomBubbles(
                        message: viewModel.messages[index],
                        currentUserUID: senderMember.userId,
                        defaultImage: defaultImage,
                        imageDownloadButton: imageDownloadButton,
                        ownerBubbleColor: ownerBubbleColor,
                        otherBubbleColor: otherBubbleColor,
                      );
                    })),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Textfield(
                title: "Type a message...",
                ctrl: viewModel.messageController,
                borderColor: textFieldBorderColor,
                onChanged: viewModel.onChanged,
                focusNode: viewModel.focusNode,
                prefixIcon: GestureDetector(
                  onTap: viewModel.showEmojis,
                  child: Icon(Icons.emoji_emotions_outlined,
                      size: 32, color: iconColor),
                ),
                sufixIcon: viewModel.messageController.text.isNotEmpty
                    ? GestureDetector(
                        onTap: viewModel.sendDummyMessage,
                        child: Icon(Icons.send, size: 18, color: iconColor),
                      )
                    : Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          GestureDetector(
                            onTap: () {
                              viewModel.sentGalleryImage(imageQuality);
                            },
                            child: Icon(Icons.attach_file,
                                size: 25, color: iconColor),
                          ),
                          const SizedBox(width: 10),
                          GestureDetector(
                            onTap: () {
                              viewModel.sentCameraImage(imageQuality);
                            },
                            child: Icon(Icons.camera_alt,
                                size: 28, color: iconColor),
                          ),
                          const SizedBox(width: 10),
                        ],
                      ),
              ),
            ),
            if (viewModel.isShowEmjois)
              EmojiKeyboard(onSelecte: viewModel.sentEmojis)
          ],
        ),
        if (viewModel.isBusy)
          Center(
            child: foundation.defaultTargetPlatform == TargetPlatform.iOS
                ? const CupertinoActivityIndicator()
                : const CircularProgressIndicator(),
          ),
      ],
    ),
  );
}