Skip to content

Commit 37409d7

Browse files
FLUT-929221-[others][flutter]: Addressed the review suggestions.
1 parent a59f67f commit 37409d7

File tree

1 file changed

+33
-26
lines changed

1 file changed

+33
-26
lines changed

lib/main.dart

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,17 @@ class ChatSampleState extends State<ChatSample> {
4343
),
4444
),
4545
ChatMessage(
46-
text: 'I’ve been doing well. I’ve started working on a new project recently.',
46+
text:
47+
'I’ve been doing well. I’ve started working on a new project recently.',
4748
time: DateTime.now(),
4849
author: const ChatAuthor(
4950
id: '8ob3-b720-g9s6-25s8',
5051
name: 'Outgoing user name',
5152
),
5253
),
5354
ChatMessage(
54-
text: 'That sounds great! I’ve been exploring a few new frameworks myself.',
55+
text:
56+
'That sounds great! I’ve been exploring a few new frameworks myself.',
5557
time: DateTime.now(),
5658
author: const ChatAuthor(
5759
id: 'a2c4-56h8-9x01-2a3d',
@@ -71,25 +73,30 @@ class ChatSampleState extends State<ChatSample> {
7173
messages: _messages, // Setting the messages list.
7274
outgoingUser: '8ob3-b720-g9s6-25s8', // Outgoing user ID.
7375
incomingBubbleSettings: ChatBubbleSettings(
74-
showTimestamp: false,
75-
showUserName: false,
76-
textStyle: TextStyle(color: Colors.white),
77-
contentPadding: EdgeInsets.only(top: 15, bottom: 30, left: 30, right: 30), // Ensure sufficient space inside the bubble to accommodate the custom tail shape.
78-
contentBackgroundColor: Colors.green[600],
79-
contentShape: CustomBorderShape(isOutgoing: false), // Custom shape for incoming message bubble.
76+
showTimestamp: false,
77+
showUserName: false,
78+
textStyle: TextStyle(color: Colors.white),
79+
// Ensure sufficient space inside the bubble to accommodate the custom tail shape.
80+
contentPadding:
81+
EdgeInsets.only(top: 15, bottom: 30, left: 28, right: 30),
82+
contentBackgroundColor: Colors.green[600],
83+
contentShape: CustomBorderShape(
84+
isOutgoing: false), // Custom shape for incoming message bubble.
8085
),
8186
outgoingBubbleSettings: ChatBubbleSettings(
8287
showTimestamp: false, // Disabling the timestamp for a cleaner look.
8388
showUserName: false, // Disabling the username for a cleaner look.
8489
showUserAvatar: false, // Disabling the avatar for a cleaner look.
85-
textStyle: TextStyle(color: Colors.white),
86-
contentPadding: EdgeInsets.only(top: 15, bottom: 30, left: 30, right: 30),
87-
contentBackgroundColor: Colors.deepPurple[600],
88-
contentShape: CustomBorderShape(isOutgoing: true), // Custom shape for outgoing message bubble.
90+
textStyle: TextStyle(color: Colors.white),
91+
contentPadding:
92+
EdgeInsets.only(top: 15, bottom: 30, left: 28, right: 30),
93+
contentBackgroundColor: Colors.deepPurple[600],
94+
contentShape: CustomBorderShape(
95+
isOutgoing: true), // Custom shape for outgoing message bubble.
8996
),
9097
composer: const ChatComposer(
9198
decoration: InputDecoration(
92-
hintText: 'Type a message',
99+
hintText: 'Type a message',
93100
),
94101
),
95102
),
@@ -104,7 +111,8 @@ class ChatSampleState extends State<ChatSample> {
104111
}
105112

106113
class CustomBorderShape extends ShapeBorder {
107-
final bool isOutgoing; // Flag to check if the message is outgoing or incoming.
114+
// Flag to check if the message is outgoing or incoming.
115+
final bool isOutgoing;
108116
final double borderRadius; // Border radius for rounded corners.
109117
final double tailHeight; // Height of the message tail.
110118

@@ -122,7 +130,8 @@ class CustomBorderShape extends ShapeBorder {
122130
// Calculate the bottom of the bubble considering the tail height.
123131
final double bottom = rect.bottom - tailHeight;
124132
// Adjust the radius based on width/height for better aesthetics.
125-
final double adjustedRadius = borderRadius.clamp(0, (rect.width / 3).clamp(0, rect.height / 3));
133+
final double adjustedRadius =
134+
borderRadius.clamp(0, (rect.width / 3).clamp(0, rect.height / 3));
126135
// Store left and right positions for reusability.
127136
final double left = rect.left;
128137
final double right = rect.right;
@@ -131,9 +140,9 @@ class CustomBorderShape extends ShapeBorder {
131140
// Create a rounded rectangle path for the bubble.
132141
path.addRRect(
133142
RRect.fromLTRBAndCorners(
134-
rect.left,
143+
left,
135144
rect.top,
136-
rect.right,
145+
right,
137146
bottom,
138147
topLeft: Radius.circular(adjustedRadius),
139148
bottomLeft: Radius.circular(adjustedRadius),
@@ -145,22 +154,19 @@ class CustomBorderShape extends ShapeBorder {
145154
// Calculate the start and end positions of the tail based on message type (outgoing/incoming).
146155
final double tailStartX =
147156
isOutgoing ? right - adjustedRadius : left + adjustedRadius;
148-
final double tailEndX = isOutgoing
149-
? right - adjustedRadius * 1.4
150-
: left + adjustedRadius * 1.5;
157+
final double tailEndX =
158+
isOutgoing ? right - adjustedRadius * 1.4 : left + adjustedRadius * 1.5;
151159

152160
// Create the tail using a quadratic bezier curve.
153161
path.moveTo(tailStartX, bottom);
154162
path.quadraticBezierTo(
155-
isOutgoing
156-
? right - adjustedRadius * 1.2
157-
: left + adjustedRadius * 1.2,
163+
isOutgoing ? right - adjustedRadius * 1.2 : left + adjustedRadius * 1.2,
158164
bottom + tailHeight * 0.5,
159165
tailStartX,
160166
bottom + tailHeight,
161167
);
162-
path.lineTo(tailEndX, bottom);
163-
path.close();
168+
path.lineTo(tailEndX, bottom);
169+
path.close();
164170

165171
return path;
166172
}
@@ -173,6 +179,7 @@ class CustomBorderShape extends ShapeBorder {
173179

174180
@override
175181
Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
176-
return getOuterPath(rect, textDirection: textDirection);
182+
// This method is not used in this implementation of ShapeBorder.
183+
return Path();
177184
}
178185
}

0 commit comments

Comments
 (0)