feat(ui): add the ability to add a background image in MessageListView

packages/stream_chat_flutter/test/src/message_list_view_test.dart

@@ -1,4 +1,8 @@
+import 'dart:convert';
+import 'dart:typed_data';
+
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
@@ -20,7 +24,8 @@ void main() {
         .thenAnswer((_) => const Stream.empty());
     when(() => channelClientState.messagesStream)
         .thenAnswer((_) => const Stream.empty());
-    when(() => channelClientState.messages).thenReturn([]);
+    when(() => channelClientState.messages)
+        .thenReturn([Message(text: 'Hello World!')]);
     when(() => channelClientState.isUpToDate).thenReturn(true);
   });
 
@@ -46,4 +51,52 @@ void main() {
     expect(find.byType(MessageListView), findsOneWidget);
     expect(find.byKey(emptyWidgetKey), findsOneWidget);
   });
+
+  testWidgets('renders empty message list view with custom background',
+      (tester) async {
+    const emptyWidgetKey = Key('empty_widget');
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: DefaultAssetBundle(
+          bundle: _TestAssetBundle(),
+          child: StreamChat(
+            client: client,
+            streamChatThemeData: StreamChatThemeData.light().copyWith(
+                messageListViewTheme: const MessageListViewThemeData(
+                    backgroundColor: Colors.grey,
+                    backgroundImage: DecorationImage(
+                      image: AssetImage('assets/background.png'),
+                      fit: BoxFit.cover,
+                    ))),
+            child: StreamChannel(
+              channel: channel,
+              child: MessageListView(
+                emptyBuilder: (_) => Container(key: emptyWidgetKey),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    expect(find.byType(MessageListView), findsOneWidget);
+    expect(find.byKey(emptyWidgetKey), findsOneWidget);
+    expect(find.byType(DecorationImage, skipOffstage: false), findsOneWidget);
+  });
+}
+
+class _TestAssetBundle extends CachingAssetBundle {
+  @override
+  Future<ByteData> load(String key) async {
+    if (key == 'assets/background.png') {
+      return ByteData.view(
+        Uint8List.fromList(
+          utf8.encode('Background'),
+        ).buffer,
+      );
+    }
+    return ByteData(0);
+  }
 }

packages/stream_chat_flutter/test/src/theme/message_list_view_theme_test.dart

@@ -109,6 +109,37 @@ void main() {
     expect(messageListViewTheme.backgroundColor,
         _messageListViewThemeDataControlDark.backgroundColor);
   });
+
+  testWidgets(
+      'Pass backgroundImage to MessageListViewThemeData return backgroundImage',
+      (WidgetTester tester) async {
+    late BuildContext _context;
+    await tester.pumpWidget(
+      MaterialApp(
+        builder: (context, child) => StreamChat(
+          client: MockStreamChatClient(),
+          streamChatThemeData: StreamChatThemeData.light()
+              .copyWith(messageListViewTheme: _messageListViewThemeDataImage),
+          child: child,
+        ),
+        home: Builder(
+          builder: (BuildContext context) {
+            _context = context;
+            return Scaffold(
+              body: StreamChannel(
+                channel: MockChannel(),
+                child: const MessageListView(),
+              ),
+            );
+          },
+        ),
+      ),
+    );
+
+    final messageListViewTheme = MessageListViewTheme.of(_context);
+    expect(messageListViewTheme.backgroundImage,
+        _messageListViewThemeDataImage.backgroundImage);
+  });
 }
 
 final _messageListViewThemeDataControl = MessageListViewThemeData(
@@ -122,3 +153,10 @@ const _messageListViewThemeDataControlHalfLerp = MessageListViewThemeData(
 final _messageListViewThemeDataControlDark = MessageListViewThemeData(
   backgroundColor: ColorTheme.dark().barsBg,
 );
+
+const _messageListViewThemeDataImage = MessageListViewThemeData(
+  backgroundImage: DecorationImage(
+    image: AssetImage('example/assets/background_doodle.png'),
+    fit: BoxFit.cover,
+  ),
+);