BubbleBuilder Update & Background Update

example/android/build.gradle

@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.6.10'
+    ext.kotlin_version = '1.7.20'
     repositories {
         google()
         mavenCentral()
@@ -26,6 +26,6 @@ subprojects {
     project.evaluationDependsOn(':app')
 }
 
-task clean(type: Delete) {
+tasks.register("clean", Delete) {
     delete rootProject.buildDir
 }

example/pubspec.yaml

@@ -70,7 +70,7 @@ flutter:
 
   # To add assets to your application, add an assets section, like this:
   assets:
-    - messages.json
+    - assets/messages.json
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware

lib/src/chat_theme.dart

@@ -59,6 +59,7 @@ abstract class ChatTheme {
     required this.attachmentButtonIcon,
     required this.attachmentButtonMargin,
     required this.backgroundColor,
+    this.backgroundImage,
     required this.dateDividerMargin,
     required this.dateDividerTextStyle,
     required this.deliveredIcon,
@@ -110,6 +111,7 @@ abstract class ChatTheme {
     required this.userAvatarNameColors,
     required this.userAvatarTextStyle,
     required this.userNameTextStyle,
+    required this.showBackgroundImage,
   });
 
   /// Icon for select attachment button.
@@ -119,7 +121,10 @@ abstract class ChatTheme {
   final EdgeInsets? attachmentButtonMargin;
 
   /// Used as a background color of a chat widget.
-  final Color backgroundColor;
+  final Color? backgroundColor;
+
+  /// Used as a background image of a chat widget.
+  final ImageProvider? backgroundImage;
 
   /// Margin around date dividers.
   final EdgeInsets dateDividerMargin;
@@ -291,6 +296,9 @@ abstract class ChatTheme {
 
   /// User names text style. Color will be overwritten with [userAvatarNameColors].
   final TextStyle userNameTextStyle;
+
+  /// When True the background image will be shown and not background color.
+  final bool showBackgroundImage;
 }
 
 /// Default chat theme which extends [ChatTheme].
@@ -303,6 +311,8 @@ class DefaultChatTheme extends ChatTheme {
     super.attachmentButtonIcon,
     super.attachmentButtonMargin,
     super.backgroundColor = neutral7,
+    super.backgroundImage,
+    super.showBackgroundImage = false,
     super.dateDividerMargin = const EdgeInsets.only(
       bottom: 32,
       top: 16,
@@ -472,6 +482,8 @@ class DarkChatTheme extends ChatTheme {
     super.attachmentButtonIcon,
     super.attachmentButtonMargin,
     super.backgroundColor = dark,
+    super.backgroundImage,
+    super.showBackgroundImage = false,
     super.dateDividerMargin = const EdgeInsets.only(
       bottom: 32,
       top: 16,

lib/src/widgets/chat.dart

@@ -1,3 +1,4 @@
+import 'dart:developer' as l;
 import 'dart:math';
 
 import 'package:flutter/material.dart';
@@ -109,6 +110,7 @@ class Chat extends StatefulWidget {
     Widget child, {
     required types.Message message,
     required bool nextMessageInGroup,
+    required bool hasEmoji,
   })? bubbleBuilder;
 
   /// See [Message.bubbleRtlAlignment].
@@ -343,6 +345,7 @@ class ChatState extends State<Chat> {
 
   @override
   void initState() {
+    l.log('show image: ${widget.theme.showBackgroundImage}');
     super.initState();
 
     _scrollController = widget.scrollController ?? AutoScrollController();
@@ -412,7 +415,16 @@ class ChatState extends State<Chat> {
             child: Stack(
               children: [
                 Container(
-                  color: widget.theme.backgroundColor,
+                  decoration: !widget.theme.showBackgroundImage
+                      ? BoxDecoration(
+                          color: widget.theme.backgroundColor,
+                        )
+                      : BoxDecoration(
+                          image: DecorationImage(
+                            image: widget.theme.backgroundImage!,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
                   child: Column(
                     children: [
                       Flexible(

lib/src/widgets/message/message.dart

@@ -67,10 +67,13 @@ class Message extends StatelessWidget {
   /// (contains `author` inside) and `nextMessageInGroup` allows you to see
   /// if the message is a part of a group (messages are grouped when written
   /// in quick succession by the same author)
+  /// If the message is just an emoji you can use `hasEmoji` to hide the
+  /// background
   final Widget Function(
     Widget child, {
     required types.Message message,
     required bool nextMessageInGroup,
+    required bool hasEmoji,
   })? bubbleBuilder;
 
   /// Determine the alignment of the bubble for RTL languages. Has no effect
@@ -313,6 +316,7 @@ class Message extends StatelessWidget {
               _messageBuilder(),
               message: message,
               nextMessageInGroup: roundBorder,
+              hasEmoji: enlargeEmojis && hideBackgroundOnEmojiMessages,
             )
           : enlargeEmojis && hideBackgroundOnEmojiMessages
               ? _messageBuilder()