Skip to content

Commit ce3d40a

Browse files
jaiminrana05jaiminrana05
committed
feat:✨handled inside bubble time
1 parent 552e024 commit ce3d40a

File tree

5 files changed

+144
-116
lines changed

5 files changed

+144
-116
lines changed

‎example/lib/data.dart‎

Lines changed: 106 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ class Data {
88
id: '1',
99
message: "Hi!",
1010
createdAt: DateTime.now(),
11-
sendBy: '1', // userId of who sends the message
11+
sendBy: '1',
12+
// userId of who sends the message
1213
status: MessageStatus.read,
1314
),
1415
Message(
@@ -32,86 +33,109 @@ class Data {
3233
sendBy: '1',
3334
status: MessageStatus.read,
3435
),
35-
// Message(
36-
// id: '5',
37-
// message: "That's fine",
38-
// createdAt: DateTime.now(),
39-
// sendBy: '2',
40-
// reaction: Reaction(reactions: ['\u{2764}'], reactedUserIds: ['1']),
41-
// status: MessageStatus.read,
42-
// ),
43-
// Message(
44-
// id: '6',
45-
// message: "When to go ?",
46-
// createdAt: DateTime.now(),
47-
// sendBy: '3',
48-
// status: MessageStatus.read,
49-
// ),
50-
// Message(
51-
// id: '7',
52-
// message: "I guess Simform will reply",
53-
// createdAt: DateTime.now(),
54-
// sendBy: '4',
55-
// status: MessageStatus.read,
56-
// ),
57-
// Message(
58-
// id: '8',
59-
// message: "https://bit.ly/3JHS2Wl",
60-
// createdAt: DateTime.now(),
61-
// sendBy: '2',
62-
// reaction: Reaction(
63-
// reactions: ['\u{2764}', '\u{1F44D}', '\u{1F44D}'],
64-
// reactedUserIds: ['2', '3', '4'],
65-
// ),
66-
// status: MessageStatus.read,
67-
// replyMessage: const ReplyMessage(
68-
// message: "Can you write the time and place of the meeting?",
69-
// replyTo: '1',
70-
// replyBy: '2',
71-
// messageId: '4',
72-
// ),
73-
// ),
74-
// Message(
75-
// id: '9',
76-
// message: "Done",
77-
// createdAt: DateTime.now(),
78-
// sendBy: '1',
79-
// status: MessageStatus.read,
80-
// reaction: Reaction(
81-
// reactions: [
82-
// '\u{2764}',
83-
// '\u{2764}',
84-
// '\u{2764}',
85-
// ],
86-
// reactedUserIds: ['2', '3', '4'],
87-
// ),
88-
// ),
89-
// Message(
90-
// id: '10',
91-
// message: "Thank you!!",
92-
// status: MessageStatus.read,
93-
// createdAt: DateTime.now(),
94-
// sendBy: '1',
95-
// reaction: Reaction(
96-
// reactions: ['\u{2764}', '\u{2764}', '\u{2764}', '\u{2764}'],
97-
// reactedUserIds: ['2', '4', '3', '1'],
98-
// ),
99-
// ),
100-
// Message(
101-
// id: '11',
102-
// message: "https://miro.medium.com/max/1000/0*s7of7kWnf9fDg4XM.jpeg",
103-
// createdAt: DateTime.now(),
104-
// messageType: MessageType.image,
105-
// sendBy: '1',
106-
// reaction: Reaction(reactions: ['\u{2764}'], reactedUserIds: ['2']),
107-
// status: MessageStatus.read,
108-
// ),
109-
// Message(
110-
// id: '12',
111-
// message: "🤩🤩",
112-
// createdAt: DateTime.now(),
113-
// sendBy: '2',
114-
// status: MessageStatus.read,
115-
// ),
36+
Message(
37+
id: '5',
38+
message:
39+
"Can you write the time and place of the meeting? Can you write the time and place of the meeting?",
40+
createdAt: DateTime.now(),
41+
sendBy: '1',
42+
status: MessageStatus.read,
43+
),
44+
Message(
45+
id: '5',
46+
message: "That's fine",
47+
createdAt: DateTime.now(),
48+
sendBy: '2',
49+
reaction: Reaction(reactions: ['\u{2764}'], reactedUserIds: ['1']),
50+
status: MessageStatus.read,
51+
),
52+
Message(
53+
id: '6',
54+
message: "When to go ?",
55+
createdAt: DateTime.now(),
56+
sendBy: '3',
57+
status: MessageStatus.read,
58+
),
59+
Message(
60+
id: '7',
61+
message: "I guess Simform will reply",
62+
createdAt: DateTime.now(),
63+
sendBy: '4',
64+
status: MessageStatus.read,
65+
),
66+
Message(
67+
id: '8',
68+
message: "https://bit.ly/3JHS2Wl",
69+
createdAt: DateTime.now(),
70+
sendBy: '2',
71+
reaction: Reaction(
72+
reactions: ['\u{2764}', '\u{1F44D}', '\u{1F44D}'],
73+
reactedUserIds: ['2', '3', '4'],
74+
),
75+
status: MessageStatus.read,
76+
replyMessage: const ReplyMessage(
77+
message: "Can you write the time and place of the meeting?",
78+
replyTo: '1',
79+
replyBy: '2',
80+
messageId: '4',
81+
),
82+
),
83+
Message(
84+
id: '9',
85+
message: "Done",
86+
createdAt: DateTime.now(),
87+
sendBy: '1',
88+
status: MessageStatus.read,
89+
reaction: Reaction(
90+
reactions: [
91+
'\u{2764}',
92+
'\u{2764}',
93+
'\u{2764}',
94+
],
95+
reactedUserIds: ['2', '3', '4'],
96+
),
97+
),
98+
Message(
99+
id: '10',
100+
message: "Thank you!!",
101+
status: MessageStatus.read,
102+
createdAt: DateTime.now(),
103+
sendBy: '1',
104+
reaction: Reaction(
105+
reactions: ['\u{2764}', '\u{2764}', '\u{2764}', '\u{2764}'],
106+
reactedUserIds: ['2', '4', '3', '1'],
107+
),
108+
),
109+
Message(
110+
id: '11',
111+
message: "https://miro.medium.com/max/1000/0*s7of7kWnf9fDg4XM.jpeg",
112+
createdAt: DateTime.now(),
113+
messageType: MessageType.image,
114+
sendBy: '1',
115+
reaction: Reaction(reactions: ['\u{2764}'], reactedUserIds: ['2']),
116+
status: MessageStatus.read,
117+
),
118+
Message(
119+
id: '12',
120+
message: "🤩🤩",
121+
createdAt: DateTime.now(),
122+
sendBy: '2',
123+
status: MessageStatus.read,
124+
),
125+
Message(
126+
id: '13',
127+
message: "",
128+
createdAt: DateTime.now(),
129+
sendBy: '2',
130+
status: MessageStatus.read,
131+
messageType: MessageType.voice
132+
),Message(
133+
id: '14',
134+
message: "",
135+
createdAt: DateTime.now(),
136+
sendBy: '1',
137+
status: MessageStatus.read,
138+
messageType: MessageType.voice
139+
),
116140
];
117141
}

‎example/lib/main.dart‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import 'dart:ui';
2+
13
import 'package:chatview/chatview.dart';
24
import 'package:example/data.dart';
35
import 'package:example/models/theme.dart';
@@ -213,6 +215,9 @@ class _ChatScreenState extends State<ChatScreen> {
213215
backgroundColor: theme.reactionPopupColor,
214216
),
215217
messageConfig: MessageConfiguration(
218+
messageDateTimeBuilder: (date) => Text(
219+
'7:34 PM',
220+
),
216221
messageReactionConfig: MessageReactionConfiguration(
217222
backgroundColor: theme.messageReactionBackGroundColor,
218223
borderColor: theme.messageReactionBackGroundColor,

‎lib/src/widgets/message_time_widget.dart‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2020
* SOFTWARE.
2121
*/
22+
import 'dart:ui';
23+
2224
import 'package:chatview/src/extensions/extensions.dart';
2325
import 'package:chatview/src/values/typedefs.dart';
2426
import 'package:flutter/material.dart';
@@ -61,7 +63,7 @@ class MessageTimeWidget extends StatelessWidget {
6163
messageTime.getTimeFromDateTime,
6264
style: messageTimeTextStyle ??
6365
TextStyle(
64-
fontSize: 10,
66+
fontSize: 14,
6567
color: Colors.black.withOpacity(0.6),
6668
),
6769
)

‎lib/src/widgets/text_message_view.dart‎

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2020
* SOFTWARE.
2121
*/
22+
import 'dart:ui';
23+
2224
import 'package:chatview/chatview.dart';
2325
import 'package:chatview/src/widgets/message_time_widget.dart';
2426
import 'package:flutter/material.dart';
@@ -82,16 +84,16 @@ class TextMessageView extends StatelessWidget {
8284

8385
final textStyle = textTheme.bodyMedium!.copyWith(
8486
color: isMessageBySender ? Colors.white : Colors.black,
85-
fontSize: 40,
87+
fontSize: 14,
8688
);
87-
final textbubbleheight = _textSize(
89+
final messageNumberOfLine = _textSize(
8890
text: textMessage,
8991
context: context,
9092
style: textStyle,
91-
).height;
93+
);
9294

9395
print(
94-
'text size-> $textbubbleheight',
96+
'Message number of lines-> $messageNumberOfLine',
9597
);
9698
return Padding(
9799
padding: messageTimePositionType.isOutSideChatBubble
@@ -125,33 +127,26 @@ class TextMessageView extends StatelessWidget {
125127
linkPreviewConfig: _linkPreviewConfig,
126128
url: textMessage,
127129
)
128-
: Text.rich(
129-
TextSpan(
130-
children: [
131-
TextSpan(
132-
text: textMessage,
133-
style: /*_textStyle ??*/
134-
textStyle,
130+
: Wrap(
131+
alignment: WrapAlignment.end,
132+
spacing: messageNumberOfLine < 2 ? 10 : 0,
133+
children: [
134+
Text(
135+
textMessage,
136+
style: textStyle,
137+
),
138+
if (messageTimePositionType.isInsideChatBubble)
139+
Transform.translate(
140+
offset: const Offset(0, 6),
141+
child: messageDateTimeBuilder
142+
?.call(message.createdAt) ??
143+
MessageTimeWidget(
144+
messageTime: message.createdAt,
145+
isCurrentUser: isMessageBySender,
146+
),
135147
),
136-
TextSpan(
137-
text: message.createdAt.getTimeFromDateTime,
138-
style: const TextStyle(
139-
fontSize: 10, color: Colors.transparent),
140-
),
141-
],
142-
),
148+
],
143149
),
144-
if (messageTimePositionType.isInsideChatBubble)
145-
Padding(
146-
padding: message.reaction.reactions.isNotEmpty
147-
? const EdgeInsets.only(bottom: 4)
148-
: const EdgeInsets.only(top: 3),
149-
child: messageDateTimeBuilder?.call(message.createdAt) ??
150-
MessageTimeWidget(
151-
messageTime: message.createdAt,
152-
isCurrentUser: isMessageBySender,
153-
),
154-
),
155150
],
156151
),
157152
),
@@ -178,7 +173,7 @@ class TextMessageView extends StatelessWidget {
178173
);
179174
}
180175

181-
Size _textSize({
176+
int _textSize({
182177
required String text,
183178
TextStyle? style,
184179
required BuildContext context,
@@ -189,7 +184,8 @@ class TextMessageView extends StatelessWidget {
189184
)..layout(
190185
maxWidth:
191186
chatBubbleMaxWidth ?? MediaQuery.of(context).size.width * 0.75);
192-
return textPainter.size;
187+
print('number of line -> ${textPainter.computeLineMetrics().length}\n');
188+
return textPainter.computeLineMetrics().length;
193189
}
194190

195191
EdgeInsetsGeometry? get _padding => isMessageBySender

‎lib/src/widgets/voice_message_view.dart‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,8 @@ class _VoiceMessageViewState extends State<VoiceMessageView> {
8787

8888
@override
8989
Widget build(BuildContext context) {
90-
final showMessageTimeIn = provide!.featureActiveConfig.messageTimePositionType;
90+
final showMessageTimeIn =
91+
provide!.featureActiveConfig.messageTimePositionType;
9192
return Padding(
9293
padding: showMessageTimeIn.isOutSideChatBubble
9394
? const EdgeInsets.only(bottom: 10)
@@ -159,7 +160,7 @@ class _VoiceMessageViewState extends State<VoiceMessageView> {
159160
reaction: widget.message.reaction,
160161
messageReactionConfig: widget.messageReactionConfig,
161162
),
162-
if (showMessageTimeIn.isOutSideChatBubble)
163+
if (!showMessageTimeIn.isOnRightSwipe || !showMessageTimeIn.isDisable)
163164
Positioned(
164165
right: 18,
165166
bottom: showMessageTimeIn.isInsideChatBubble

0 commit comments

Comments
 (0)