lib/screens/channel/call/call.dart

@@ -21,8 +21,6 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
   Timer? _timer;
   String _currentDuration = '00:00:00';
 
-  int _layoutMode = 0;
-
   bool _showControls = true;
   CancelableOperation? _hideControlsOperation;
 
@@ -56,14 +54,6 @@ 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);
@@ -85,107 +75,6 @@ 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();
@@ -235,39 +124,20 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
           child: GestureDetector(
             behavior: HitTestBehavior.translucent,
             child: Obx(
-              () => Column(
+              () => Stack(
                 children: [
-                  SizeTransition(
+                  Column(
-                    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: Builder(
+                        child: Container(
-                      builder: (context) {
+                          color: Theme.of(context).colorScheme.surfaceContainer,
-                        switch (_layoutMode) {
+                          child: provider.focusTrack.value != null
-                          case 1:
+                              ? InteractiveParticipantWidget(
-                            return _buildGridLayout();
+                                  isFixed: false,
-                          default:
+                                  participant: provider.focusTrack.value!,
-                            return _buildListLayout();
+                                  onTap: () {},
-                        }
+                                )
-                      },
+                              : const SizedBox(),
                         ),
                       ),
                       if (provider.room.localParticipant != null)
@@ -284,6 +154,50 @@ 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,7 +217,9 @@ class InteractiveParticipantWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
+    return Material(
+      color: Colors.transparent,
+      child: GestureDetector(
         child: Container(
           width: width,
           height: height,
@@ -236,6 +238,7 @@ class InteractiveParticipantWidget extends StatelessWidget {
             ),
           );
         },
+      ),
     );
   }
 }

lib/widgets/chat/call/call_participant_info.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:get/get.dart';
 import 'package:livekit_client/livekit_client.dart';
 
 class ParticipantInfoWidget extends StatelessWidget {
@@ -35,42 +34,38 @@ class ParticipantInfoWidget extends StatelessWidget {
                   style: const TextStyle(color: Colors.white),
                 ),
               ),
-            const SizedBox(width: 5),
             isScreenShare
-                ? const Icon(
+                ? const Padding(
+                    padding: EdgeInsets.only(left: 5),
+                    child: Icon(
                       Icons.monitor,
                       color: Colors.white,
                       size: 16,
+                    ),
                   )
-                : Icon(
+                : Padding(
+                    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)
-              Icon(
+              Padding(
-                {
+                padding: const EdgeInsets.only(left: 5),
-                  ConnectionQuality.excellent: Icons.signal_cellular_alt,
+                child: Icon(
-                  ConnectionQuality.good: Icons.signal_cellular_alt_2_bar,
+                  connectionQuality == ConnectionQuality.poor
-                  ConnectionQuality.poor: Icons.signal_cellular_alt_1_bar,
+                      ? Icons.wifi_off_outlined
-                }[connectionQuality],
+                      : Icons.wifi,
                   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),
+              ),
           ],
         ),
       );