Improve buttons bar

lib/ui/screens/call_screen.dart

@@ -468,8 +468,7 @@ class _CallScreenState extends SafeState<CallScreen> {
     return Column(
       children: <Widget>[
         _canHideMenuBar ? Container() : _buildMembersArea(),
-        _buildVideosArea(),
-        _canHideMenuBar ? Container() : _buildFooterArea()
+        _buildVideosArea()
       ],
     );
   }
@@ -512,6 +511,9 @@ class _CallScreenState extends SafeState<CallScreen> {
           isStreamingVideo && _isLocalStreamVisible
               ? _buildLocalVideo()
               : Container(),
+
+          // Buttons bar
+          _canHideMenuBar ? Container() : _buildFooterArea()
         ],
       ),
     );
@@ -527,16 +529,19 @@ class _CallScreenState extends SafeState<CallScreen> {
       height: 50,
       width: 50,
       right: 10,
-      bottom: 10,
+      bottom: (_canHideMenuBar ? 10 : 80),
     );
   }
 
   /// Footer area
   Widget _buildFooterArea() {
-    return Material(
-      color: Colors.black,
+    return Positioned(
+      bottom: 10,
+      right: 0,
+      left: 0,
       child: Row(
         mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
           // Show / hide user video button
           _FooterButton(
@@ -556,6 +561,7 @@ class _CallScreenState extends SafeState<CallScreen> {
 
           // Hang up call
           _FooterButton(
+            width: 60,
             icon: Icon(Icons.phone, color: Colors.red),
             onPressed: () => _leaveCall(),
           ),
@@ -570,8 +576,8 @@ class _CallScreenState extends SafeState<CallScreen> {
           ),
 
           // Interrupt local streaming
-          Expanded(
-            child: PopupMenuButton<_PopupMenuOption>(
+          PopupMenuButton<_PopupMenuOption>(
+            offset: Offset(0, -110),
             itemBuilder: (c) => [
               // Switch camera
               PopupMenuItem(
@@ -584,9 +590,8 @@ class _CallScreenState extends SafeState<CallScreen> {
                   child: Text(tr("Stop streaming")),
                   value: _PopupMenuOption.STOP_STREAMING)
             ],
-              icon: Icon(Icons.menu),
+            child: _FooterButton(icon: Icon(Icons.menu), onPressed: null),
             onSelected: (d) => _handleSelectedMenuOption(d),
-            ),
           )
         ],
       ),
@@ -598,24 +603,31 @@ class _FooterButton extends StatelessWidget {
   final Function() onPressed;
   final Widget icon;
   final bool visible;
+  final double width;
 
   const _FooterButton({
     Key key,
     @required this.icon,
     @required this.onPressed,
     this.visible = true,
-  })  : assert(onPressed != null),
-        assert(icon != null),
+    this.width = 35,
+  })  : assert(icon != null),
         assert(visible != null),
         super(key: key);
 
   @override
   Widget build(BuildContext context) {
     if (!visible) return Container();
-    return Expanded(
-      child: IconButton(
-        icon: icon,
-        onPressed: () => onPressed(),
+    return Padding(
+      padding: const EdgeInsets.only(left: 8, right: 8),
+      child: Container(
+        width: width,
+        child: FloatingActionButton(
+          child: icon,
+          foregroundColor: Colors.white,
+          onPressed: onPressed == null ? null : () => onPressed(),
+          backgroundColor: Colors.black,
+        ),
       ),
     );
   }