Improve buttons bar

lib/ui/screens/call_screen.dart

@@ -28,10 +28,15 @@ enum _PopupMenuOption { STOP_STREAMING, SWITCH_CAMERA }
 
 class CallScreen extends StatefulWidget {
   final int convID;
+  final bool floatingButtons;
 
-  const CallScreen({Key key, @required this.convID})
+  const CallScreen({
-      : assert(convID != null),
+    Key key,
+    @required this.convID,
+    this.floatingButtons = true,
+  })  : assert(convID != null),
         assert(convID > 0),
+        assert(floatingButtons != null),
         super(key: key);
 
   @override
@@ -479,7 +484,10 @@ class _CallScreenState extends SafeState<CallScreen> {
     return Column(
       children: <Widget>[
         _canHideMenuBar ? Container() : _buildMembersArea(),
-        Expanded(child: LayoutBuilder(builder: _buildVideosArea))
+        Expanded(child: LayoutBuilder(builder: _buildVideosArea)),
+        _canHideMenuBar || widget.floatingButtons
+            ? Container()
+            : _buildFooterArea()
       ],
     );
   }
@@ -536,7 +544,7 @@ class _CallScreenState extends SafeState<CallScreen> {
     return Stack(
       fit: StackFit.expand,
       children: [
-        // Remove peers videos
+        // Remote peers videos
         Column(
           children: rows,
         ),
@@ -547,7 +555,10 @@ class _CallScreenState extends SafeState<CallScreen> {
             : Container(),
 
         // Buttons bar
-        _canHideMenuBar ? Container() : _buildFooterArea()
+        _canHideMenuBar || !widget.floatingButtons
+            ? Container()
+            : Positioned(
+                bottom: 10, right: 0, left: 0, child: _buildFooterArea())
       ],
     );
   }
@@ -562,16 +573,15 @@ class _CallScreenState extends SafeState<CallScreen> {
       height: 50,
       width: 50,
       right: 10,
-      bottom: (_canHideMenuBar ? 10 : 80),
+      bottom: (_canHideMenuBar || !widget.floatingButtons ? 10 : 80),
     );
   }
 
   /// Footer area
   Widget _buildFooterArea() {
-    return Positioned(
+    return Container(
-      bottom: 10,
+      color: !widget.floatingButtons ? Colors.black : null,
-      right: 0,
+      height: !widget.floatingButtons ? 40 : null,
-      left: 0,
       child: Row(
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
@@ -582,6 +592,7 @@ class _CallScreenState extends SafeState<CallScreen> {
             icon: Icon(_isLocalStreamVisible
                 ? Icons.visibility
                 : Icons.visibility_off),
+            roundedButtons: widget.floatingButtons,
             onPressed: () => _toggleLocalStreamVisibility(),
           ),
 
@@ -590,12 +601,14 @@ class _CallScreenState extends SafeState<CallScreen> {
             onPressed: () => _toggleStreaming(false),
             icon: Icon(
                 isStreamingAudio && !isAudioMuted ? Icons.mic : Icons.mic_off),
+            roundedButtons: widget.floatingButtons,
           ),
 
           // Hang up call
           _FooterButton(
             width: 60,
             icon: Icon(Icons.phone),
+            roundedButtons: widget.floatingButtons,
             bgColor: Colors.red.shade900,
             onPressed: () => _leaveCall(),
           ),
@@ -606,6 +619,7 @@ class _CallScreenState extends SafeState<CallScreen> {
             icon: Icon(isStreamingVideo && !isVideoMuted
                 ? Icons.videocam
                 : Icons.videocam_off),
+            roundedButtons: widget.floatingButtons,
             onPressed: () => _toggleStreaming(true),
           ),
 
@@ -624,7 +638,11 @@ class _CallScreenState extends SafeState<CallScreen> {
                   child: Text(tr("Stop streaming")),
                   value: _PopupMenuOption.STOP_STREAMING)
             ],
-            child: _FooterButton(icon: Icon(Icons.menu), onPressed: null),
+            child: _FooterButton(
+              icon: Icon(Icons.menu, color: Colors.white),
+              onPressed: null,
+              roundedButtons: widget.floatingButtons,
+            ),
             onSelected: (d) => _handleSelectedMenuOption(d),
           )
         ],
@@ -639,22 +657,28 @@ class _FooterButton extends StatelessWidget {
   final bool visible;
   final double width;
   final Color bgColor;
+  final bool roundedButtons;
 
-  const _FooterButton(
+  const _FooterButton({
-      {Key key,
+    Key key,
     @required this.icon,
     @required this.onPressed,
     this.visible = true,
     this.width = 45,
-      this.bgColor = Colors.black})
+    this.bgColor = Colors.black,
-      : assert(icon != null),
+    @required this.roundedButtons,
+  })  : assert(icon != null),
         assert(visible != null),
+        assert(roundedButtons != null),
         super(key: key);
 
   @override
   Widget build(BuildContext context) {
     if (!visible) return Container();
-    return Padding(
+    return roundedButtons ? _buildFAB() : _buildRectangleButton();
+  }
+
+  Widget _buildFAB() => Padding(
       padding: const EdgeInsets.only(left: 6, right: 6),
       child: Container(
         width: width,
@@ -664,7 +688,12 @@ class _FooterButton extends StatelessWidget {
           onPressed: onPressed == null ? null : () => onPressed(),
           backgroundColor: bgColor,
         ),
-      ),
+      ));
+
+  Widget _buildRectangleButton() => MaterialButton(
+        onPressed: onPressed,
+        child: icon,
+        color: bgColor,
+        textColor: Colors.white,
       );
-  }
 }

lib/ui/widgets/tablet_mode/calls/call_window_widget.dart

@@ -41,7 +41,12 @@ class _CallWindowWidgetState extends State<CallWindowWidget> {
       left: _left,
       top: _top,
       child: Draggable(
-        child: Card(child: CallScreen(convID: widget.convID)),
+        child: Card(
+          child: CallScreen(
+            convID: widget.convID,
+            floatingButtons: false,
+          ),
+        ),
         feedback: Container(
           width: _WindowSize.width,
           height: _WindowSize.height,