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: [ 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: [ (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: [ 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: [ (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: [ MyColors.gradiantEndColor, MyColors.gradiantStartColor, ], ), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ (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); } }