💄 Grid view in call

ios/Podfile.lock

@@ -113,7 +113,7 @@ PODS:
     - TOCropViewController (~> 2.7.4)
   - image_picker_ios (0.0.1):
     - Flutter
-  - livekit_client (2.2.2):
+  - livekit_client (2.2.3):
     - Flutter
     - WebRTC-SDK (= 125.6422.04)
   - media_kit_libs_ios_video (1.0.4):
@@ -295,7 +295,7 @@ SPEC CHECKSUMS:
   GoogleUtilities: ea963c370a38a8069cc5f7ba4ca849a60b6d7d15
   image_cropper: 37d40f62177c101ff4c164906d259ea2c3aa70cf
   image_picker_ios: c560581cceedb403a6ff17f2f816d7fea1421fc1
-  livekit_client: c767049a635d5b6d43de3273dca3c439b8a6e970
+  livekit_client: bad83a7776a41abc42e1f26d903eeac9164c8a9f
   media_kit_libs_ios_video: a5fe24bc7875ccd6378a0978c13185e1344651c1
   media_kit_native_event_loop: e6b2ab20cf0746eb1c33be961fcf79667304fa2a
   media_kit_video: 5da63f157170e5bf303bf85453b7ef6971218a2e

lib/screens/channel/call/call.dart

@@ -87,13 +87,14 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
 
   Widget _buildListLayout() {
     final ChatCallProvider call = Get.find();
-    return Stack(
+    return Obx(
+      () => Stack(
         children: [
           Container(
             color: Theme.of(context).colorScheme.surfaceContainer,
             child: call.focusTrack.value != null
                 ? InteractiveParticipantWidget(
-                  isFixed: false,
+                    isFixedAvatar: false,
                     participant: call.focusTrack.value!,
                     onTap: () {},
                   )
@@ -120,7 +121,7 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
                     child: ClipRRect(
                       borderRadius: const BorderRadius.all(Radius.circular(8)),
                       child: InteractiveParticipantWidget(
-                      isFixed: true,
+                        isFixedAvatar: true,
                         width: 120,
                         height: 120,
                         color: Theme.of(context).cardColor,
@@ -139,13 +140,13 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
             ),
           ),
         ],
+      ),
     );
   }
 
   Widget _buildGridLayout() {
     final ChatCallProvider call = Get.find();
-    return LayoutBuilder(
-      builder: (context, constraints) {
+    return LayoutBuilder(builder: (context, constraints) {
       double screenWidth = constraints.maxWidth;
       double screenHeight = constraints.maxHeight;
 
@@ -155,7 +156,8 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
       double tileWidth = screenWidth / columns;
       double tileHeight = screenHeight / rows;
 
-        return GridView.builder(
+      return Obx(
+        () => GridView.builder(
           gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
             crossAxisCount: columns,
             childAspectRatio: tileWidth / tileHeight,
@@ -165,11 +167,11 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
             final track = call.participantTracks[index];
             return Padding(
               padding: const EdgeInsets.all(16),
+              child: Card(
                 child: ClipRRect(
                   borderRadius: const BorderRadius.all(Radius.circular(8)),
                   child: InteractiveParticipantWidget(
-                  isFixed: true,
-                  color: Theme.of(context).colorScheme.surfaceContainerLow,
+                    color: Theme.of(context).colorScheme.surfaceContainerHigh,
                     participant: track,
                     onTap: () {
                       if (track.participant.sid !=
@@ -179,11 +181,12 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
                     },
                   ),
                 ),
+              ),
             );
           },
+        ),
       );
-      }
-    );
+    });
   }
 
   @override
@@ -234,8 +237,7 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
         body: SafeArea(
           child: GestureDetector(
             behavior: HitTestBehavior.translucent,
-            child: Obx(
-              () => Column(
+            child: Column(
               children: [
                 SizeTransition(
                   sizeFactor: _controlsAnimation,
@@ -259,6 +261,9 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
                   ),
                 ),
                 Expanded(
+                  child: Material(
+                    color: Theme.of(context).colorScheme.surfaceContainerLow,
+                    elevation: 2,
                     child: Builder(
                       builder: (context) {
                         switch (_layoutMode) {
@@ -270,6 +275,7 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
                       },
                     ),
                   ),
+                ),
                 if (provider.room.localParticipant != null)
                   SizeTransition(
                     sizeFactor: _controlsAnimation,
@@ -284,7 +290,6 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
                   ),
               ],
             ),
-            ),
             onTap: () {
               _toggleControls();
             },

lib/widgets/chat/call/call_participant.dart

@@ -201,7 +201,7 @@ class InteractiveParticipantWidget extends StatelessWidget {
   final double? width;
   final double? height;
   final Color? color;
-  final bool isFixed;
+  final bool isFixedAvatar;
   final ParticipantTrack participant;
   final Function() onTap;
 
@@ -210,7 +210,7 @@ class InteractiveParticipantWidget extends StatelessWidget {
     this.width,
     this.height,
     this.color,
-    this.isFixed = false,
+    this.isFixedAvatar = false,
     required this.participant,
     required this.onTap,
   });
@@ -222,7 +222,7 @@ class InteractiveParticipantWidget extends StatelessWidget {
         width: width,
         height: height,
         color: color,
-        child: ParticipantWidget.widgetFor(participant, isFixed: isFixed),
+        child: ParticipantWidget.widgetFor(participant, isFixed: isFixedAvatar),
       ),
       onTap: () => onTap(),
       onLongPress: () {

pubspec.lock

@@ -261,10 +261,10 @@ packages:
     dependency: transitive
     description:
       name: cross_file
-      sha256: "55d7b444feb71301ef6b8838dbc1ae02e63dd48c8773f3810ff53bb1e2945b32"
+      sha256: "7caf6a750a0c04effbb52a676dce9a4a592e10ad35c34d6d2d0e4811160d5670"
       url: "https://pub.dev"
     source: hosted
-    version: "0.3.4+1"
+    version: "0.3.4+2"
   crypto:
     dependency: "direct main"
     description:
@@ -684,10 +684,10 @@ packages:
     dependency: "direct main"
     description:
       name: flutter_webrtc
-      sha256: d305793e6737c59a81c45b18484e1f985710827704eeb9092573387efcbae272
+      sha256: f46bd76cef6e8d787dc707d0c591f0e89c912a2970c7b5e68a55b9cca1bdde4c
       url: "https://pub.dev"
     source: hosted
-    version: "0.11.5"
+    version: "0.11.6"
   font_awesome_flutter:
     dependency: "direct main"
     description:
@@ -732,10 +732,10 @@ packages:
     dependency: "direct main"
     description:
       name: go_router
-      sha256: "39dd52168d6c59984454183148dc3a5776960c61083adfc708cc79a7b3ce1ba8"
+      sha256: d380de0355788c5c784fe9f81b43fc833b903991c25ecc4e2a416a67faefa722
       url: "https://pub.dev"
     source: hosted
-    version: "14.2.1"
+    version: "14.2.2"
   graphs:
     dependency: transitive
     description:
@@ -820,10 +820,10 @@ packages:
     dependency: transitive
     description:
       name: image_picker_for_web
-      sha256: "5d6eb13048cd47b60dbf1a5495424dea226c5faf3950e20bf8120a58efb5b5f3"
+      sha256: "65d94623e15372c5c51bebbcb820848d7bcb323836e12dfdba60b5d3a8b39e50"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.4"
+    version: "3.0.5"
   image_picker_ios:
     dependency: transitive
     description:
@@ -948,10 +948,10 @@ packages:
     dependency: "direct main"
     description:
       name: livekit_client
-      sha256: e6b1e8a3cdcae95f7e62c0371590648444bac245fce3a1bcfb4ec05889ad82f3
+      sha256: be2a3375851a6147d5de94a870edd6e831ab8d3d793e3563ba1ff1b05490b3de
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.2"
+    version: "2.2.3"
   logging:
     dependency: transitive
     description:
@@ -1524,10 +1524,10 @@ packages:
     dependency: transitive
     description:
       name: shared_preferences_web
-      sha256: "3a293170d4d9403c3254ee05b84e62e8a9b3c5808ebd17de6a33fe9ea6457936"
+      sha256: "59dc807b94d29d52ddbb1b3c0d3b9d0a67fc535a64e62a5542c8db0513fcb6c2"
       url: "https://pub.dev"
     source: hosted
-    version: "2.4.0"
+    version: "2.4.1"
   shared_preferences_windows:
     dependency: transitive
     description:
@@ -1809,10 +1809,10 @@ packages:
     dependency: transitive
     description:
       name: url_launcher_web
-      sha256: "8d9e750d8c9338601e709cd0885f95825086bd8b642547f26bda435aade95d8a"
+      sha256: a36e2d7981122fa185006b216eb6b5b97ede3f9a54b7a511bc966971ab98d049
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.1"
+    version: "2.3.2"
   url_launcher_windows:
     dependency: transitive
     description: