FLUT-929221-[others][flutter]: Updated the sample and read me description

Author: KompelliSravanSyncfusion

README.md

@@ -1,16 +1,29 @@
-# custombordershapesformessages
+# How to design a custom border shape for messages in Flutter SfChat widget
 
-A new Flutter project.
+This repository contains a sample to implement the custom border shape for messages on a [Syncfusion Flutter Chat](https://help.syncfusion.com/flutter/chat/getting-started) widget.
 
-## Getting Started
+Please refer the KB through this [link](https://support.syncfusion.com/agent/kb/18701).
 
-This project is a starting point for a Flutter application.
+## Syncfusion widgets:
 
-A few resources to get you started if this is your first Flutter project:
+This project used the following Syncfusion widget(s):
+* [Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat)
 
-- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
-- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
+## Supported platforms
 
-For help getting started with Flutter development, view the
-[online documentation](https://docs.flutter.dev/), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.
+Refer to the following link to know about the supported platform - [Platforms](https://help.syncfusion.com/flutter/system-requirements#supported-platforms)
+
+## Requirements to run the sample
+
+Refer to the following link to know about system requirements - [System Requirements](https://help.syncfusion.com/flutter/system-requirements)
+
+## How to run the sample
+
+1. Clone the sample and open it in preferred IDE.
+2. Run the application.
+
+   *Note: If you download the sample using the "Download ZIP" option, right-click it, select Properties, and then select Unblock.*
+
+## License
+
+Syncfusion has no liability for any damage or consequence that may arise by using or viewing the samples. The samples are for demonstrative purposes, and if you choose to use or access the samples, you agree to not hold Syncfusion liable, in any form, for any damage that is related to use, for accessing, or viewing the samples. By accessing, viewing, or seeing the samples, you acknowledge and agree Syncfusion’s samples will not allow you seek injunctive relief in any form for any claim related to the sample. If you do not agree to this, do not view, access, utilize, or otherwise do anything with Syncfusion’s samples.

custombordershapesformessages.iml

@@ -23,17 +23,18 @@ class ChatSampleState extends State<ChatSample> {
 
   @override
   void initState() {
+    // Initialize the list of chat messages.
     _messages = <ChatMessage>[
       ChatMessage(
-        text: 'Hi! How are you?',
+        text: 'Hi! How are you?', // Outgoing message.
         time: DateTime.now(),
         author: const ChatAuthor(
           id: '8ob3-b720-g9s6-25s8',
           name: 'Outgoing user name',
         ),
       ),
       ChatMessage(
-        text: 'Fine, how about you?',
+        text: 'Fine, how about you?', // Incoming message.
         time: DateTime.now(),
         author: const ChatAuthor(
           id: 'a2c4-56h8-9x01-2a3d',
@@ -42,17 +43,15 @@ class ChatSampleState extends State<ChatSample> {
         ),
       ),
       ChatMessage(
-        text:
-            'I’ve been doing well. I’ve started working on a new project recently.',
+        text: 'I’ve been doing well. I’ve started working on a new project recently.',
         time: DateTime.now(),
         author: const ChatAuthor(
           id: '8ob3-b720-g9s6-25s8',
           name: 'Outgoing user name',
         ),
       ),
       ChatMessage(
-        text:
-            'That sounds great! I’ve been exploring a few new frameworks myself.',
+        text: 'That sounds great! I’ve been exploring a few new frameworks myself.',
         time: DateTime.now(),
         author: const ChatAuthor(
           id: 'a2c4-56h8-9x01-2a3d',
@@ -69,29 +68,28 @@ class ChatSampleState extends State<ChatSample> {
     return Padding(
       padding: const EdgeInsets.only(left: 80, right: 80, bottom: 20),
       child: SfChat(
-        messages: _messages,
-        outgoingUser: '8ob3-b720-g9s6-25s8',
+        messages: _messages, // Setting the messages list.
+        outgoingUser: '8ob3-b720-g9s6-25s8', // Outgoing user ID.
         incomingBubbleSettings: ChatBubbleSettings(
-          showTimestamp: false,
-          showUserName: false,
-          textStyle: TextStyle(color: Colors.white),
-          contentPadding:
-              EdgeInsets.only(top: 15, bottom: 30, left: 30, right: 30),
-          contentBackgroundColor: Colors.green[600],
-          contentShape: CustomBorderShape(isOutgoing: false),
+          showTimestamp: false, 
+          showUserName: false, 
+          textStyle: TextStyle(color: Colors.white), 
+          contentPadding: EdgeInsets.only(top: 15, bottom: 30, left: 30, right: 30), // Ensure sufficient space inside the bubble to accommodate the custom tail shape.
+          contentBackgroundColor: Colors.green[600], 
+          contentShape: CustomBorderShape(isOutgoing: false), // Custom shape for incoming message bubble.
         ),
         outgoingBubbleSettings: ChatBubbleSettings(
-            showTimestamp: false,
-            showUserName: false,
-            showUserAvatar: false,
-            textStyle: TextStyle(color: Colors.white),
-            contentPadding:
-                EdgeInsets.only(top: 15, bottom: 30, left: 30, right: 30),
-            contentBackgroundColor: Colors.deepPurple[600],
-            contentShape: CustomBorderShape(isOutgoing: true)),
+          showTimestamp: false, // Disabling the timestamp for a cleaner look.
+          showUserName: false, // Disabling the username for a cleaner look.
+          showUserAvatar: false, // Disabling the avatar for a cleaner look.
+          textStyle: TextStyle(color: Colors.white), 
+          contentPadding: EdgeInsets.only(top: 15, bottom: 30, left: 30, right: 30),
+          contentBackgroundColor: Colors.deepPurple[600], 
+          contentShape: CustomBorderShape(isOutgoing: true), // Custom shape for outgoing message bubble.
+        ),
         composer: const ChatComposer(
           decoration: InputDecoration(
-            hintText: 'Type a message',
+            hintText: 'Type a message', 
           ),
         ),
       ),
@@ -106,26 +104,31 @@ class ChatSampleState extends State<ChatSample> {
 }
 
 class CustomBorderShape extends ShapeBorder {
-  final bool isOutgoing;
-  final double borderRadius;
-  final double tailHeight;
+  final bool isOutgoing; // Flag to check if the message is outgoing or incoming.
+  final double borderRadius; // Border radius for rounded corners.
+  final double tailHeight; // Height of the message tail.
 
   const CustomBorderShape({
     required this.isOutgoing,
-    this.borderRadius = 30.0,
-    this.tailHeight = 15.0,
+    this.borderRadius = 30.0, // Default value for border radius.
+    this.tailHeight = 15.0, // Default value for tail height.
   });
 
   @override
   EdgeInsetsGeometry get dimensions => EdgeInsets.zero;
 
   @override
   Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
+    // Calculate the bottom of the bubble considering the tail height.
     final double bottom = rect.bottom - tailHeight;
-    final double adjustedRadius =
-        borderRadius.clamp(0, (rect.width / 3).clamp(0, rect.height / 3));
-    final path = Path();
-
+    // Adjust the radius based on width/height for better aesthetics.
+    final double adjustedRadius = borderRadius.clamp(0, (rect.width / 3).clamp(0, rect.height / 3));
+    // Store left and right positions for reusability.
+    final double left = rect.left;
+    final double right = rect.right;
+    final Path path = Path();
+
+    // Create a rounded rectangle path for the bubble.
     path.addRRect(
       RRect.fromLTRBAndCorners(
         rect.left,
@@ -139,23 +142,25 @@ class CustomBorderShape extends ShapeBorder {
       ),
     );
 
-    final tailStartX =
-        isOutgoing ? rect.right - adjustedRadius : rect.left + adjustedRadius;
-    final tailEndX = isOutgoing
-        ? rect.right - adjustedRadius * 1.4
-        : rect.left + adjustedRadius * 1.5;
+    // Calculate the start and end positions of the tail based on message type (outgoing/incoming).
+    final double tailStartX =
+        isOutgoing ? right - adjustedRadius : left + adjustedRadius;
+    final double tailEndX = isOutgoing
+        ? right - adjustedRadius * 1.4
+        : left + adjustedRadius * 1.5;
 
+    // Create the tail using a quadratic bezier curve.
     path.moveTo(tailStartX, bottom);
     path.quadraticBezierTo(
       isOutgoing
-          ? rect.right - adjustedRadius * 1.2
-          : rect.left + adjustedRadius * 1.2,
+          ? right - adjustedRadius * 1.2
+          : left + adjustedRadius * 1.2,
       bottom + tailHeight * 0.5,
       tailStartX,
       bottom + tailHeight,
     );
-    path.lineTo(tailEndX, bottom);
-    path.close();
+    path.lineTo(tailEndX, bottom); 
+    path.close(); 
 
     return path;
   }