feat: allow for top widgets within the bubble (#814)

* Add empty package

* Add old lib utils

* Bump dependencies, rename

* Add new preview widget

* Adapt base text widgets to the new intended layout

* Add example

* Update callback to include if sentByMe and update example

* Lowercase text, iOS has a tendency to put HTTPS which does not work

* Revert previous commit

* rebase and fix dependencies

* Implement in FlyerChatTextMessage

* Implement in FlyerChatImageMessage

* Demo

* Add for SimpleTextMessage

* Add support for fileMessages

* rebase

* rename topWidgets to topWidget for consistency

* support image

---------

Co-authored-by: Alex Demchenko <[email protected]>

Author: nicolasbraun

examples/flyer_chat/lib/create_message.dart

@@ -15,7 +15,9 @@ Future<Message> createMessage(
   const uuid = Uuid();
   Message message;
 
-  if (Random().nextBool() || textOnly == true || text != null) {
+  final randomType = Random().nextInt(3) + 1; // 1, 2, or 3
+
+  if (randomType == 1 || textOnly == true || text != null) {
     message = TextMessage(
       id: uuid.v4(),
       authorId: authorId,
@@ -50,15 +52,27 @@ Future<Message> createMessage(
       ),
     );
 
-    message = ImageMessage(
-      id: uuid.v4(),
-      authorId: authorId,
-      createdAt: DateTime.now().toUtc(),
-      sentAt: localOnly == true ? DateTime.now().toUtc() : null,
-      source: response.data['img'],
-      thumbhash: response.data['thumbhash'],
-      blurhash: response.data['blurhash'],
-    );
+    if (randomType == 2) {
+      message = ImageMessage(
+        id: uuid.v4(),
+        authorId: authorId,
+        createdAt: DateTime.now().toUtc(),
+        sentAt: localOnly == true ? DateTime.now().toUtc() : null,
+        source: response.data['img'],
+        thumbhash: response.data['thumbhash'],
+        blurhash: response.data['blurhash'],
+      );
+    } else {
+      message = FileMessage(
+        id: uuid.v4(),
+        name: 'image.png',
+        authorId: authorId,
+        createdAt: DateTime.now().toUtc(),
+        sentAt: localOnly == true ? DateTime.now().toUtc() : null,
+        source: response.data['img'],
+        size: 1000000,
+      );
+    }
   }
 
   // return ImageMessage(

packages/flutter_chat_ui/lib/src/simple_text_message.dart

@@ -66,6 +66,9 @@ class SimpleTextMessage extends StatelessWidget {
   /// A [LinkPreviewBuilder] must be provided for the preview to be displayed.
   final LinkPreviewPosition linkPreviewPosition;
 
+  /// The widget to display on top of the message.
+  final Widget? topWidget;
+
   /// Creates a widget to display a simple text message.
   const SimpleTextMessage({
     super.key,
@@ -85,6 +88,7 @@ class SimpleTextMessage extends StatelessWidget {
     this.timeAndStatusPosition = TimeAndStatusPosition.end,
     this.timeAndStatusPositionInlineInsets = const EdgeInsets.only(bottom: 2),
     this.linkPreviewPosition = LinkPreviewPosition.bottom,
+    this.topWidget,
   });
 
   bool get _isOnlyEmoji => message.metadata?['isOnlyEmoji'] == true;
@@ -185,6 +189,7 @@ class SimpleTextMessage extends StatelessWidget {
           mainAxisSize: MainAxisSize.min,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
+            if (topWidget != null) topWidget!,
             if (effectiveLinkPreviewPosition == LinkPreviewPosition.top)
               linkPreviewWidget!,
             timeAndStatusPosition == TimeAndStatusPosition.inline

packages/flyer_chat_file_message/lib/src/flyer_chat_file_message.dart

@@ -74,6 +74,9 @@ class FlyerChatFileMessage extends StatelessWidget {
   /// Position of the timestamp and status indicator relative to the text content.
   final TimeAndStatusPosition timeAndStatusPosition;
 
+  /// The widget to display on top of the message.
+  final Widget? topWidget;
+
   /// Creates a widget to display a file message.
   const FlyerChatFileMessage({
     super.key,
@@ -95,6 +98,7 @@ class FlyerChatFileMessage extends StatelessWidget {
     this.showTime = true,
     this.showStatus = true,
     this.timeAndStatusPosition = TimeAndStatusPosition.end,
+    this.topWidget,
   });
 
   @override
@@ -190,42 +194,36 @@ class FlyerChatFileMessage extends StatelessWidget {
     required TimeAndStatus? timeAndStatus,
     required TextStyle? textStyle,
   }) {
-    if (timeAndStatus == null ||
-        timeAndStatusPosition == TimeAndStatusPosition.inline) {
-      return fileContent;
-    }
-
     final textDirection = Directionality.of(context);
-    switch (timeAndStatusPosition) {
-      case TimeAndStatusPosition.start:
-        return Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          mainAxisSize: MainAxisSize.min,
-          children: [fileContent, timeAndStatus],
-        );
-      case TimeAndStatusPosition.inline:
-        return Row(
+
+    return Stack(
+      children: [
+        Column(
           mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.end,
-          children: [fileContent, const SizedBox(width: 4), timeAndStatus],
-        );
-      case TimeAndStatusPosition.end:
-        return Stack(
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Padding(
-              padding: EdgeInsets.only(bottom: textStyle?.lineHeight ?? 0),
-              child: fileContent,
-            ),
-            Opacity(opacity: 0, child: timeAndStatus),
-            Positioned.directional(
-              textDirection: textDirection,
-              end: 0,
-              bottom: 0,
-              child: timeAndStatus,
-            ),
+            if (topWidget != null) topWidget!,
+            // In comparison to other messages types, if timeAndStatusPosition is inline,
+            // the fileContent is already a Row with the timeAndStatus widget inside it.
+            fileContent,
+            if (timeAndStatusPosition != TimeAndStatusPosition.inline)
+              // Ensure the  width is not smaller than the timeAndStatus widget
+              // Ensure the height accounts for it's height
+              Opacity(opacity: 0, child: timeAndStatus),
           ],
-        );
-    }
+        ),
+        if (timeAndStatusPosition != TimeAndStatusPosition.inline &&
+            timeAndStatus != null)
+          Positioned.directional(
+            textDirection: textDirection,
+            end: timeAndStatusPosition == TimeAndStatusPosition.end ? 0 : null,
+            start:
+                timeAndStatusPosition == TimeAndStatusPosition.start ? 0 : null,
+            bottom: 0,
+            child: timeAndStatus,
+          ),
+      ],
+    );
   }
 
   String _formatFileSize(int sizeInBytes) {
@@ -286,12 +284,6 @@ class FlyerChatFileMessage extends StatelessWidget {
   }
 }
 
-/// Internal extension for calculating the visual line height of a TextStyle.
-extension on TextStyle {
-  /// Calculates the line height based on the style's `height` and `fontSize`.
-  double get lineHeight => (height ?? 1) * (fontSize ?? 0);
-}
-
 /// A widget to display the message timestamp and status indicator.
 class TimeAndStatus extends StatelessWidget {
   /// The time the message was created.