together_mobile/lib/screens/message/components/message_bubble.dart

import 'package:flutter/material.dart';

import 'package:together_mobile/common/constants.dart';

class MessageBubble extends StatelessWidget {
  const MessageBubble({
    super.key,
    required this.contactId,
    required this.senderId,
    required this.type,
    required this.dateTime,
    required this.isShowTime,
    required this.text,
    required this.attachments,
  });

  final String contactId, senderId, type, dateTime, text;
  final bool isShowTime;
  final List<String> attachments;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(
        vertical: kDefaultPadding / 2,
        horizontal: kDefaultPadding,
      ),
      child: Column(
        children: [
          // message date time
          if (isShowTime)
            SizedBox(
              height: 35.0,
              child: Text(
                dateTime,
                style: const TextStyle(
                  color: kUnActivatedColor,
                ),
              ),
            ),
          Row(
            textDirection:
                senderId == contactId ? TextDirection.ltr : TextDirection.rtl,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CircleAvatar(
                child: Image.asset('assets/images/user_2.png'),
              ),
              const SizedBox(
                width: 10,
              ),
              Expanded(
                child: Column(
                  crossAxisAlignment: senderId == contactId
                      ? CrossAxisAlignment.start
                      : CrossAxisAlignment.end,
                  children: [
                    // nickname
                    // used in group chat only
                    // Text('123'),
                    // const SizedBox(
                    //   height: 5,
                    // ),

                    if (type == 'text/multipart')
                      // message box
                      Container(
                        padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
                        decoration: BoxDecoration(
                          color: senderId == contactId
                              ? const Color.fromARGB(255, 241, 241, 241)
                              : kPrimaryColor,
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            // text message content
                            Text(
                              text,
                              textWidthBasis: TextWidthBasis.longestLine,
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            // image content if has
                            if (attachments.isNotEmpty)
                              ...List.filled(
                                attachments.length,
                                Container(
                                  margin: const EdgeInsets.only(
                                    bottom: 10,
                                  ),
                                  constraints: const BoxConstraints(
                                    maxHeight: 100,
                                  ),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10.0),
                                  ),
                                  child: Image.asset(
                                    'assets/images/Logo_dark.png',
                                  ),
                                ),
                              ),
                          ],
                        ),
                      ),
                  ],
                ),
              ),
            ],
          ),
          TextButton(
            onPressed: () {},
            style: TextButton.styleFrom(
              padding: EdgeInsets.zero,
              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            child: const Text('显示信息'),
          ),
        ],
      ),
    );
  }
}