Example app cleanup (#394)

* Example app cleanup

- mirror local video when front facing camera
- run dart format
- update dependencies

* try a newer version of stable flutter

---------

Co-authored-by: CloudWebRTC <[email protected]>

Author: VictorUvarov

example/lib/main.dart

@@ -4,7 +4,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_webrtc/flutter_webrtc.dart';
 import 'package:sip_ua/sip_ua.dart';
 
-
 import 'src/about.dart';
 import 'src/callscreen.dart';
 import 'src/dialpad.dart';
@@ -57,6 +56,18 @@ class MyApp extends StatelessWidget {
       theme: ThemeData(
         primarySwatch: Colors.blue,
         fontFamily: 'Roboto',
+        inputDecorationTheme: InputDecorationTheme(
+          hintStyle: TextStyle(color: Colors.grey),
+          contentPadding: EdgeInsets.all(10.0),
+          border: UnderlineInputBorder(
+              borderSide: BorderSide(color: Colors.black12)),
+        ),
+        elevatedButtonTheme: ElevatedButtonThemeData(
+          style: ElevatedButton.styleFrom(
+            padding: const EdgeInsets.all(16),
+            textStyle: TextStyle(fontSize: 18),
+          ),
+        ),
       ),
       initialRoute: '/',
       onGenerateRoute: _onGenerateRoute,

example/lib/src/about.dart

@@ -4,21 +4,21 @@ class AboutWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-        appBar: AppBar(
-          title: Text("About"),
-        ),
-        body: SingleChildScrollView(
-          child: Padding(
-            padding: const EdgeInsets.all(18.0),
-            child: Center(
-              child: Column(
-                children: <Widget>[
-                  Text(
-                      'GitHub:\nhttps://github.com/cloudwebrtc/dart-sip-ua.git')
-                ],
-              ),
+      appBar: AppBar(
+        title: Text("About"),
+      ),
+      body: SingleChildScrollView(
+        child: Padding(
+          padding: const EdgeInsets.all(18.0),
+          child: Center(
+            child: Column(
+              children: <Widget>[
+                Text('GitHub:\nhttps://github.com/cloudwebrtc/dart-sip-ua.git'),
+              ],
             ),
           ),
-        ));
+        ),
+      ),
+    );
   }
 }

example/lib/src/callscreen.dart

@@ -10,9 +10,11 @@ import 'widgets/action_button.dart';
 class CallScreenWidget extends StatefulWidget {
   final SIPUAHelper? _helper;
   final Call? _call;
+
   CallScreenWidget(this._helper, this._call, {Key? key}) : super(key: key);
+
   @override
-  _MyCallScreenWidget createState() => _MyCallScreenWidget();
+  State<CallScreenWidget> createState() => _MyCallScreenWidget();
 }
 
 class _MyCallScreenWidget extends State<CallScreenWidget>
@@ -27,13 +29,17 @@ class _MyCallScreenWidget extends State<CallScreenWidget>
 
   bool _showNumPad = false;
   String _timeLabel = '00:00';
-  late Timer _timer;
   bool _audioMuted = false;
   bool _videoMuted = false;
   bool _speakerOn = false;
   bool _hold = false;
+  bool _mirror = true;
   String? _holdOriginator;
   CallStateEnum _state = CallStateEnum.NONE;
+
+  late String _transferTarget;
+  late Timer _timer;
+
   SIPUAHelper? get helper => widget._helper;
 
   bool get voiceOnly =>
@@ -237,6 +243,9 @@ class _MyCallScreenWidget extends State<CallScreenWidget>
   void _switchCamera() {
     if (_localStream != null) {
       Helper.switchCamera(_localStream!.getVideoTracks()[0]);
+      setState(() {
+        _mirror = !_mirror;
+      });
     }
   }
 
@@ -264,7 +273,6 @@ class _MyCallScreenWidget extends State<CallScreenWidget>
     }
   }
 
-  late String _transferTarget;
   void _handleTransfer() {
     showDialog<void>(
       context: context,
@@ -324,7 +332,7 @@ class _MyCallScreenWidget extends State<CallScreenWidget>
   }
 
   List<Widget> _buildNumPad() {
-    var labels = [
+    final labels = [
       [
         {'1': ''},
         {'2': 'abc'},
@@ -364,22 +372,22 @@ class _MyCallScreenWidget extends State<CallScreenWidget>
   }
 
   Widget _buildActionButtons() {
-    var hangupBtn = ActionButton(
+    final hangupBtn = ActionButton(
       title: "hangup",
       onPressed: () => _handleHangup(),
       icon: Icons.call_end,
       fillColor: Colors.red,
     );
 
-    var hangupBtnInactive = ActionButton(
+    final hangupBtnInactive = ActionButton(
       title: "hangup",
       onPressed: () {},
       icon: Icons.call_end,
       fillColor: Colors.grey,
     );
 
-    var basicActions = <Widget>[];
-    var advanceActions = <Widget>[];
+    final basicActions = <Widget>[];
+    final advanceActions = <Widget>[];
 
     switch (_state) {
       case CallStateEnum.NONE:
@@ -472,91 +480,117 @@ class _MyCallScreenWidget extends State<CallScreenWidget>
         break;
     }
 
-    var actionWidgets = <Widget>[];
+    final actionWidgets = <Widget>[];
 
     if (_showNumPad) {
       actionWidgets.addAll(_buildNumPad());
     } else {
       if (advanceActions.isNotEmpty) {
-        actionWidgets.add(Padding(
+        actionWidgets.add(
+          Padding(
             padding: const EdgeInsets.all(3),
             child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                children: advanceActions)));
+                children: advanceActions),
+          ),
+        );
       }
     }
 
-    actionWidgets.add(Padding(
+    actionWidgets.add(
+      Padding(
         padding: const EdgeInsets.all(3),
         child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-            children: basicActions)));
+            children: basicActions),
+      ),
+    );
 
     return Column(
-        crossAxisAlignment: CrossAxisAlignment.end,
-        mainAxisAlignment: MainAxisAlignment.end,
-        children: actionWidgets);
+      crossAxisAlignment: CrossAxisAlignment.end,
+      mainAxisAlignment: MainAxisAlignment.end,
+      children: actionWidgets,
+    );
   }
 
   Widget _buildContent() {
-    var stackWidgets = <Widget>[];
+    final stackWidgets = <Widget>[];
 
     if (!voiceOnly && _remoteStream != null) {
-      stackWidgets.add(Center(
-        child: RTCVideoView(_remoteRenderer!),
-      ));
+      stackWidgets.add(
+        Center(
+          child: RTCVideoView(
+            _remoteRenderer!,
+            objectFit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover,
+          ),
+        ),
+      );
     }
 
     if (!voiceOnly && _localStream != null) {
-      stackWidgets.add(Container(
-        child: AnimatedContainer(
-          child: RTCVideoView(_localRenderer!),
+      stackWidgets.add(
+        AnimatedContainer(
+          child: RTCVideoView(
+            _localRenderer!,
+            mirror: _mirror,
+            objectFit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover,
+          ),
           height: _localVideoHeight,
           width: _localVideoWidth,
           alignment: Alignment.topRight,
           duration: Duration(milliseconds: 300),
           margin: _localVideoMargin,
         ),
-        alignment: Alignment.topRight,
-      ));
+      );
     }
 
-    stackWidgets.addAll([
-      Positioned(
-        top: voiceOnly ? 48 : 6,
-        left: 0,
-        right: 0,
-        child: Center(
+    stackWidgets.addAll(
+      [
+        Positioned(
+          top: voiceOnly ? 48 : 6,
+          left: 0,
+          right: 0,
+          child: Center(
             child: Column(
-          crossAxisAlignment: CrossAxisAlignment.center,
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            Center(
-                child: Padding(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                Center(
+                  child: Padding(
                     padding: const EdgeInsets.all(6),
                     child: Text(
                       (voiceOnly ? 'VOICE CALL' : 'VIDEO CALL') +
                           (_hold
                               ? ' PAUSED BY ${_holdOriginator!.toUpperCase()}'
                               : ''),
                       style: TextStyle(fontSize: 24, color: Colors.black54),
-                    ))),
-            Center(
-                child: Padding(
+                    ),
+                  ),
+                ),
+                Center(
+                  child: Padding(
                     padding: const EdgeInsets.all(6),
                     child: Text(
                       '$remoteIdentity',
                       style: TextStyle(fontSize: 18, color: Colors.black54),
-                    ))),
-            Center(
-                child: Padding(
+                    ),
+                  ),
+                ),
+                Center(
+                  child: Padding(
                     padding: const EdgeInsets.all(6),
-                    child: Text(_timeLabel,
-                        style: TextStyle(fontSize: 14, color: Colors.black54))))
-          ],
-        )),
-      ),
-    ]);
+                    child: Text(
+                      _timeLabel,
+                      style: TextStyle(fontSize: 14, color: Colors.black54),
+                    ),
+                  ),
+                )
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
 
     return Stack(
       children: stackWidgets,
@@ -566,16 +600,18 @@ class _MyCallScreenWidget extends State<CallScreenWidget>
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-        appBar: AppBar(
-            automaticallyImplyLeading: false,
-            title: Text('[$direction] ${EnumHelper.getName(_state)}')),
-        body: Container(
-          child: _buildContent(),
-        ),
-        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
-        floatingActionButton: Padding(
-            padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 24.0),
-            child: Container(width: 320, child: _buildActionButtons())));
+      appBar: AppBar(
+        automaticallyImplyLeading: false,
+        title: Text('[$direction] ${EnumHelper.getName(_state)}'),
+      ),
+      body: _buildContent(),
+      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
+      floatingActionButton: Container(
+        width: 320,
+        padding: EdgeInsets.only(bottom: 24.0),
+        child: _buildActionButtons(),
+      ),
+    );
   }
 
   @override