✨ Call grid layout

lib/screens/channel/call/call.dart

@@ -21,6 +21,8 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
   Timer? _timer;
   String _currentDuration = '00:00:00';
 
+  int _layoutMode = 0;
+
   bool _showControls = true;
   CancelableOperation? _hideControlsOperation;
 
@@ -54,6 +56,14 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
     });
   }
 
+  void _switchLayout() {
+    if (_layoutMode < 1) {
+      setState(() => _layoutMode++);
+    } else {
+      setState(() => _layoutMode = 0);
+    }
+  }
+
   void _toggleControls() {
     if (_showControls) {
       setState(() => _showControls = false);
@@ -75,6 +85,107 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
     );
   }
 
+  Widget _buildListLayout() {
+    final ChatCallProvider call = Get.find();
+    return Stack(
+      children: [
+        Container(
+          color: Theme.of(context).colorScheme.surfaceContainer,
+          child: call.focusTrack.value != null
+              ? InteractiveParticipantWidget(
+                  isFixed: false,
+                  participant: call.focusTrack.value!,
+                  onTap: () {},
+                )
+              : const SizedBox(),
+        ),
+        Positioned(
+          left: 0,
+          right: 0,
+          top: 0,
+          child: SizedBox(
+            height: 128,
+            child: ListView.builder(
+              scrollDirection: Axis.horizontal,
+              itemCount: math.max(0, call.participantTracks.length),
+              itemBuilder: (BuildContext context, int index) {
+                final track = call.participantTracks[index];
+                if (track.participant.sid ==
+                    call.focusTrack.value?.participant.sid) {
+                  return Container();
+                }
+
+                return Padding(
+                  padding: const EdgeInsets.only(top: 8, left: 8),
+                  child: ClipRRect(
+                    borderRadius: const BorderRadius.all(Radius.circular(8)),
+                    child: InteractiveParticipantWidget(
+                      isFixed: true,
+                      width: 120,
+                      height: 120,
+                      color: Theme.of(context).cardColor,
+                      participant: track,
+                      onTap: () {
+                        if (track.participant.sid !=
+                            call.focusTrack.value?.participant.sid) {
+                          call.changeFocusTrack(track);
+                        }
+                      },
+                    ),
+                  ),
+                );
+              },
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildGridLayout() {
+    final ChatCallProvider call = Get.find();
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        double screenWidth = constraints.maxWidth;
+        double screenHeight = constraints.maxHeight;
+
+        int columns = (math.sqrt(call.participantTracks.length)).ceil();
+        int rows = (call.participantTracks.length / columns).ceil();
+
+        double tileWidth = screenWidth / columns;
+        double tileHeight = screenHeight / rows;
+
+        return GridView.builder(
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: columns,
+            childAspectRatio: tileWidth / tileHeight,
+          ),
+          itemCount: math.max(0, call.participantTracks.length),
+          itemBuilder: (BuildContext context, int index) {
+            final track = call.participantTracks[index];
+            return Padding(
+              padding: const EdgeInsets.all(16),
+              child: ClipRRect(
+                borderRadius: const BorderRadius.all(Radius.circular(8)),
+                child: InteractiveParticipantWidget(
+                  isFixed: true,
+                  color: Theme.of(context).colorScheme.surfaceContainerLow,
+                  participant: track,
+                  onTap: () {
+                    if (track.participant.sid !=
+                        call.focusTrack.value?.participant.sid) {
+                      call.changeFocusTrack(track);
+                    }
+                  },
+                ),
+              ),
+            );
+          },
+        );
+      }
+    );
+  }
+
   @override
   void initState() {
     Get.find<ChatCallProvider>().setupRoom();
@@ -124,20 +235,39 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
           child: GestureDetector(
             behavior: HitTestBehavior.translucent,
             child: Obx(
-              () => Stack(
+              () => Column(
                 children: [
-                  Column(
+                  SizeTransition(
+                    sizeFactor: _controlsAnimation,
+                    axis: Axis.vertical,
+                    child: SizedBox(
+                      width: MediaQuery.of(context).size.width,
+                      height: 64,
+                      child: Row(
                         children: [
+                          const Expanded(child: SizedBox()),
+                          IconButton(
+                            icon: _layoutMode == 0
+                                ? const Icon(Icons.view_list)
+                                : const Icon(Icons.grid_view),
+                            onPressed: () {
+                              _switchLayout();
+                            },
+                          ),
+                        ],
+                      ).paddingSymmetric(horizontal: 10),
+                    ),
+                  ),
                   Expanded(
-                        child: Container(
+                    child: Builder(
-                          color: Theme.of(context).colorScheme.surfaceContainer,
+                      builder: (context) {
-                          child: provider.focusTrack.value != null
+                        switch (_layoutMode) {
-                              ? InteractiveParticipantWidget(
+                          case 1:
-                                  isFixed: false,
+                            return _buildGridLayout();
-                                  participant: provider.focusTrack.value!,
+                          default:
-                                  onTap: () {},
+                            return _buildListLayout();
-                                )
+                        }
-                              : const SizedBox(),
+                      },
                     ),
                   ),
                   if (provider.room.localParticipant != null)
@@ -154,50 +284,6 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
                     ),
                 ],
               ),
-                  Positioned(
-                    left: 0,
-                    right: 0,
-                    top: 0,
-                    child: SizedBox(
-                      height: 128,
-                      child: ListView.builder(
-                        scrollDirection: Axis.horizontal,
-                        itemCount:
-                            math.max(0, provider.participantTracks.length),
-                        itemBuilder: (BuildContext context, int index) {
-                          final track = provider.participantTracks[index];
-                          if (track.participant.sid ==
-                              provider.focusTrack.value?.participant.sid) {
-                            return Container();
-                          }
-
-                          return Padding(
-                            padding: const EdgeInsets.only(top: 8, left: 8),
-                            child: ClipRRect(
-                              borderRadius:
-                                  const BorderRadius.all(Radius.circular(8)),
-                              child: InteractiveParticipantWidget(
-                                isFixed: true,
-                                width: 120,
-                                height: 120,
-                                color: Theme.of(context).cardColor,
-                                participant: track,
-                                onTap: () {
-                                  if (track.participant.sid !=
-                                      provider
-                                          .focusTrack.value?.participant.sid) {
-                                    provider.changeFocusTrack(track);
-                                  }
-                                },
-                              ),
-                            ),
-                          );
-                        },
-                      ),
-                    ),
-                  ),
-                ],
-              ),
             ),
             onTap: () {
               _toggleControls();

lib/widgets/chat/call/call_participant.dart

@@ -217,9 +217,7 @@ class InteractiveParticipantWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Material(
+    return GestureDetector(
-      color: Colors.transparent,
-      child: GestureDetector(
       child: Container(
         width: width,
         height: height,
@@ -238,7 +236,6 @@ class InteractiveParticipantWidget extends StatelessWidget {
           ),
         );
       },
-      ),
     );
   }
 }

lib/widgets/chat/call/call_participant_info.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 import 'package:livekit_client/livekit_client.dart';
 
 class ParticipantInfoWidget extends StatelessWidget {
@@ -34,38 +35,42 @@ class ParticipantInfoWidget extends StatelessWidget {
                   style: const TextStyle(color: Colors.white),
                 ),
               ),
+            const SizedBox(width: 5),
             isScreenShare
-                ? const Padding(
+                ? const Icon(
-                    padding: EdgeInsets.only(left: 5),
-                    child: Icon(
                     Icons.monitor,
                     color: Colors.white,
                     size: 16,
-                    ),
                   )
-                : Padding(
+                : Icon(
-                    padding: const EdgeInsets.only(left: 5),
-                    child: Icon(
                     audioAvailable ? Icons.mic : Icons.mic_off,
                     color: audioAvailable ? Colors.white : Colors.red,
                     size: 16,
                   ),
-                  ),
+            const SizedBox(width: 3),
             if (connectionQuality != ConnectionQuality.unknown)
-              Padding(
+              Icon(
-                padding: const EdgeInsets.only(left: 5),
+                {
-                child: Icon(
+                  ConnectionQuality.excellent: Icons.signal_cellular_alt,
-                  connectionQuality == ConnectionQuality.poor
+                  ConnectionQuality.good: Icons.signal_cellular_alt_2_bar,
-                      ? Icons.wifi_off_outlined
+                  ConnectionQuality.poor: Icons.signal_cellular_alt_1_bar,
-                      : Icons.wifi,
+                }[connectionQuality],
                 color: {
                   ConnectionQuality.excellent: Colors.green,
                   ConnectionQuality.good: Colors.orange,
                   ConnectionQuality.poor: Colors.red,
                 }[connectionQuality],
                 size: 16,
+              )
+            else
+              const SizedBox(
+                width: 12,
+                height: 12,
+                child: CircularProgressIndicator(
+                  color: Colors.white,
+                  strokeWidth: 2,
                 ),
-              ),
+              ).paddingAll(3),
           ],
         ),
       );