update more screenshots

Author: renefloor

melos.yaml

@@ -33,6 +33,7 @@ command:
       cupertino_icons: ^1.0.3
       desktop_drop: '>=0.5.0 <0.8.0'
       device_info_plus: '>=11.0.0 <13.0.0'
+      device_preview: ^1.2.0
       diacritic: ^0.1.5
       dio: ^5.4.3+1
       drift: ^2.28.0

packages/docs_screenshots/pubspec.yaml

@@ -21,6 +21,7 @@ dependencies:
 
 dev_dependencies:
   alchemist: ^0.14.0
+  device_preview: ^1.2.0
   flutter_test:
     sdk: flutter
   mocktail: ^1.0.0

packages/docs_screenshots/test/channel/channel_preview_test.dart

@@ -1,4 +1,5 @@
 import 'package:alchemist/alchemist.dart';
+import 'package:device_preview/device_preview.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
@@ -48,7 +49,7 @@ void main() {
   goldenTest(
     'channel list view',
     fileName: 'channel_list_view',
-    constraints: const BoxConstraints.tightFor(width: 375, height: 400),
+    constraints: const BoxConstraints.tightFor(width: 430, height: 932),
     builder: () {
       final client = MockClient();
 
@@ -115,17 +116,27 @@ void main() {
 
       stubQueryChannelsForGoldens(client, channels);
 
-      return MaterialApp(
-        theme: docsScreenshotsTheme(),
-        debugShowCheckedModeBanner: false,
-        home: StreamChat(
-          client: client,
-          streamChatThemeData: docsStreamChatThemeData(),
-          connectivityStream: Stream.value([ConnectivityResult.mobile]),
-          child: Scaffold(
-            body: StreamChannelListView(
-              controller: controller,
-              shrinkWrap: true,
+      return DeviceFrame(
+        device: Devices.ios.iPhone13,
+        isFrameVisible: true,
+        screen: MaterialApp(
+          theme: docsScreenshotsTheme(),
+          debugShowCheckedModeBanner: false,
+          home: StreamChat(
+            client: client,
+            streamChatThemeData: docsStreamChatThemeData(),
+            connectivityStream: Stream.value([ConnectivityResult.mobile]),
+            child: Scaffold(
+              appBar: AppBar(
+                title: const Text('Stream Chat'),
+                actions: [
+                  IconButton(icon: const Icon(Icons.edit_outlined), onPressed: null),
+                ],
+              ),
+              body: StreamChannelListView(
+                controller: controller,
+                shrinkWrap: true,
+              ),
             ),
           ),
         ),
@@ -161,15 +172,25 @@ void main() {
           streamChatThemeData: docsStreamChatThemeData(),
           connectivityStream: Stream.value([ConnectivityResult.mobile]),
           child: Scaffold(
-            body: Swipeable(
-              key: const ValueKey('swipeable-channel'),
-              backgroundBuilder: (context, details) => Container(
-                color: Colors.red,
-                alignment: Alignment.centerRight,
-                padding: const EdgeInsets.symmetric(horizontal: 20),
-                child: const Icon(Icons.delete, color: Colors.white),
-              ),
-              child: StreamChannelListItem(channel: channel),
+            body: Stack(
+              children: [
+                Container(
+                  color: Colors.red,
+                  alignment: Alignment.centerRight,
+                  padding: const EdgeInsets.only(right: 20),
+                  child: const Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Icon(Icons.delete, color: Colors.white),
+                      Text('Delete', style: TextStyle(color: Colors.white, fontSize: 12)),
+                    ],
+                  ),
+                ),
+                Transform.translate(
+                  offset: const Offset(-80, 0),
+                  child: StreamChannelListItem(channel: channel),
+                ),
+              ],
             ),
           ),
         ),

packages/docs_screenshots/test/channel/goldens/macos/channel_list_view.png

@@ -34,7 +34,7 @@ void main() {
   goldenTest(
     'draft list view',
     fileName: 'draft_list_view',
-    constraints: const BoxConstraints.tightFor(width: 375, height: 400),
+    constraints: const BoxConstraints.tightFor(width: 375, height: 550),
     builder: () {
       final client = MockClient();
       stubMockClientCurrentUser(client, OwnUser(id: 'user-1', name: 'Alice'));
@@ -72,9 +72,33 @@ void main() {
           streamChatThemeData: docsStreamChatThemeData(),
           connectivityStream: Stream.value([ConnectivityResult.mobile]),
           child: Scaffold(
-            body: StreamDraftListView(
-              controller: controller,
-              shrinkWrap: true,
+            appBar: AppBar(
+              title: const Text('Stream Chat'),
+              actions: [
+                IconButton(icon: const Icon(Icons.edit_outlined), onPressed: null),
+              ],
+            ),
+            body: StreamDraftListView(controller: controller),
+            bottomNavigationBar: BottomNavigationBar(
+              currentIndex: 3,
+              items: const [
+                BottomNavigationBarItem(
+                  icon: Icon(Icons.chat_bubble_outline),
+                  label: 'Chats',
+                ),
+                BottomNavigationBarItem(
+                  icon: Icon(Icons.alternate_email),
+                  label: 'Mentions',
+                ),
+                BottomNavigationBarItem(
+                  icon: Icon(Icons.comment_outlined),
+                  label: 'Threads',
+                ),
+                BottomNavigationBarItem(
+                  icon: Icon(Icons.edit_note),
+                  label: 'Drafts',
+                ),
+              ],
             ),
           ),
         ),

packages/docs_screenshots/test/channel/goldens/macos/swipe_channel.png

@@ -3,6 +3,7 @@ import 'dart:io';
 import 'dart:typed_data';
 
 import 'package:alchemist/alchemist.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 
@@ -21,6 +22,11 @@ Future<void> testExecutable(FutureOr<void> Function() testMain) async {
 
   return AlchemistConfig.runWithConfig(
     config: AlchemistConfig(
+      goldenTestTheme: GoldenTestTheme(
+        backgroundColor: Colors.transparent,
+        borderColor: Colors.transparent,
+        nameTextStyle: const TextStyle(fontSize: 18),
+      ),
       ciGoldensConfig: const CiGoldensConfig(enabled: false),
       platformGoldensConfig: const PlatformGoldensConfig(enabled: true),
     ),