mohemm-flutter-app/lib/ui/chat/chat_bubble.dart

import 'package:flutter/material.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';

// todo: @aamir use extension methods, and use correct widgets.

class ChatBubble extends StatelessWidget {
  const ChatBubble(
      {Key? key,
      required this.text,
      required this.replyText,
      required this.isCurrentUser,
      required this.isSeen,
      required this.isDelivered,
      required this.dateTime,
      required this.isReplied,
      required this.userName})
      : super(key: key);
  final String text;
  final String replyText;
  final bool isCurrentUser;
  final bool isSeen;
  final bool isDelivered;
  final String dateTime;
  final bool isReplied;
  final String userName;

  @override
  Widget build(BuildContext context) {
    return isCurrentUser ? currentUser(context) : receiptUser(context);

    return Padding(
      // padding: EdgeInsets.zero,
      padding: EdgeInsets.only(
        left: isCurrentUser ? 110 : 20,
        right: isCurrentUser ? 20 : 110,
        bottom: 9,
      ),

      child: Align(
        alignment: isCurrentUser ? Alignment.centerRight : Alignment.centerLeft,
        child: DecoratedBox(
          decoration: BoxDecoration(
            color: MyColors.white,
            gradient: isCurrentUser
                ? null
                : const LinearGradient(
                    transform: GradientRotation(
                      .46,
                    ),
                    begin: Alignment.topRight,
                    end: Alignment.bottomLeft,
                    colors: <Color>[
                      MyColors.gradiantEndColor,
                      MyColors.gradiantStartColor,
                    ],
                  ),
            borderRadius: BorderRadius.circular(
              10,
            ),
          ),
          child: Padding(
            padding: EdgeInsets.only(
              top: isReplied ? 8 : 5,
              right: 8,
              left: 8,
              bottom: 5,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                if (isReplied)
                  ClipRRect(
                    borderRadius: BorderRadius.circular(
                      5.0,
                    ),
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border(
                          left: BorderSide(
                            width: 6,
                            color: isCurrentUser ? MyColors.gradiantStartColor : MyColors.white,
                          ),
                        ),
                        color: isCurrentUser ? MyColors.black.withOpacity(0.10) : MyColors.black.withOpacity(0.30),
                      ),
                      child: Row(
                        children: [
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                (userName)
                                    .toText12(
                                      color: MyColors.gradiantStartColor,
                                      isBold: false,
                                    )
                                    .paddingOnly(
                                      right: 5,
                                      top: 5,
                                      bottom: 0,
                                      left: 5,
                                    ),
                                replyText
                                    .toText10(
                                      color: isCurrentUser ? MyColors.grey71Color : MyColors.white.withOpacity(0.5),
                                      isBold: false,
                                      maxlines: 4,
                                    )
                                    .paddingOnly(
                                      right: 5,
                                      top: 5,
                                      bottom: 8,
                                      left: 5,
                                    ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                if (isReplied) 8.height,
                text.toText12(
                  color: isCurrentUser ? MyColors.grey57Color : MyColors.white,
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    dateTime.toText12(
                      color: isCurrentUser ? MyColors.grey41Color.withOpacity(.5) : MyColors.white.withOpacity(0.7),
                    ),
                    if (isCurrentUser) 5.width,
                    if (isCurrentUser)
                      Icon(
                        isDelivered ? Icons.done_all : Icons.done_all,
                        color: isSeen ? MyColors.textMixColor : MyColors.grey9DColor,
                        size: 14,
                      ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget currentUser(context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        if (isReplied)
          ClipRRect(
            borderRadius: BorderRadius.circular(
              5.0,
            ),
            child: Container(
              width: double.infinity,
              decoration: BoxDecoration(
                border: Border(
                  left: BorderSide(width: 6, color: isCurrentUser ? MyColors.gradiantStartColor : MyColors.white),
                ),
                color: isCurrentUser ? MyColors.black.withOpacity(0.10) : MyColors.black.withOpacity(0.30),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  (userName).toText12(color: MyColors.gradiantStartColor, isBold: false).paddingOnly(right: 5, top: 5, bottom: 0, left: 5),
                  replyText.toText10(color: isCurrentUser ? MyColors.grey71Color : MyColors.white.withOpacity(0.5), isBold: false, maxlines: 4).paddingOnly(right: 5, top: 5, bottom: 8, left: 5),
                ],
              ).expanded,
            ),
          ).paddingOnly(right: 5, bottom: 7),
        (text).toText12(),
        Align(
          alignment: Alignment.centerRight,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              dateTime.toText10(color: MyColors.grey41Color.withOpacity(.5)),
              7.width,
              Icon(
                isDelivered ? Icons.done_all : Icons.done_all,
                color: isSeen ? MyColors.textMixColor : MyColors.grey9DColor,
                size: 14,
              ),
            ],
          ),
        ),
      ],
    ).paddingOnly(top: 11, left: 13, right: 7, bottom: 5).objectContainerView(disablePadding: true).paddingOnly(left: MediaQuery.of(context).size.width * 0.3);
  }

  Widget receiptUser(context) {
    return Container(
      padding: const EdgeInsets.only(top: 11, left: 13, right: 7, bottom: 5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        gradient: const LinearGradient(
          transform: GradientRotation(.83),
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: <Color>[
            MyColors.gradiantEndColor,
            MyColors.gradiantStartColor,
          ],
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          if (isReplied)
            ClipRRect(
              borderRadius: BorderRadius.circular(
                5.0,
              ),
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border(
                    left: BorderSide(width: 6, color: isCurrentUser ? MyColors.gradiantStartColor : MyColors.white),
                  ),
                  color: isCurrentUser ? MyColors.black.withOpacity(0.10) : MyColors.black.withOpacity(0.30),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    (userName).toText12(color: MyColors.gradiantStartColor, isBold: false).paddingOnly(right: 5, top: 5, bottom: 0, left: 5),
                    replyText.toText10(color: isCurrentUser ? MyColors.grey71Color : MyColors.white.withOpacity(0.5), isBold: false, maxlines: 4).paddingOnly(right: 5, top: 5, bottom: 8, left: 5),
                  ],
                ).expanded,
              ),
            ).paddingOnly(right: 5, bottom: 7),
          (text).toText12(color: Colors.white),
          Align(
            alignment: Alignment.centerRight,
            child: dateTime.toText10(
              color: Colors.white.withOpacity(.71),
            ),
          ),
        ],
      ),
    ).paddingOnly(right: MediaQuery.of(context).size.width * 0.3);
  }
}