[RSDK-4265] Widgets (#78)

example/viam_example_app/lib/main.dart

@@ -8,6 +8,7 @@ import 'package:viam_example_app/screens/sensor.dart';
 import 'package:viam_example_app/screens/servo.dart';
 import 'package:viam_example_app/screens/stream.dart';
 import 'package:viam_sdk/viam_sdk.dart';
+import 'package:viam_sdk/widgets.dart';
 
 void main() {
   runApp(const MyApp());
@@ -137,10 +138,11 @@ class _MyHomePageState extends State<MyHomePage> {
     }
     if (rname.subtype == Base.subtype.resourceSubtype && _cameraName != null) {
       return BaseScreen(
-          base: Base.fromRobot(_robot, rname.name),
           resourceName: rname,
-          camera: Camera.fromRobot(_robot, _cameraName!.name),
-          streamClient: _getStream(_cameraName!));
+          base: Base.fromRobot(_robot, rname.name),
+          cameras:
+              _robot.resourceNames.where((e) => e.subtype == Camera.subtype.resourceSubtype).map((e) => Camera.fromRobot(_robot, e.name)),
+          robot: _robot);
     }
     if (rname.subtype == Board.subtype.resourceSubtype) {
       return BoardScreen(board: Board.fromRobot(_robot, rname.name), resourceName: rname);
@@ -198,11 +200,7 @@ class _MyHomePageState extends State<MyHomePage> {
                         ])
                       : _loading
                           ? PlatformCircularProgressIndicator()
-                          : PlatformElevatedButton(
-                              onPressed: () {
-                                _login();
-                              },
-                              child: const Text('Login')),
+                          : ViamButton(onPressed: _login, text: 'Login', role: ViamButtonRole.inverse, style: ViamButtonStyle.filled)
                 ],
               ),
             ),

example/viam_example_app/lib/screens/base.dart

@@ -1,15 +1,16 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
 import 'package:viam_sdk/viam_sdk.dart';
+import 'package:viam_sdk/widgets.dart';
 
 class BaseScreen extends StatelessWidget {
   final Base base;
   final ResourceName resourceName;
-  final Camera camera;
-  final StreamClient streamClient;
+  final Iterable<Camera> cameras;
+  final RobotClient robot;
 
   // TODO change BaseScreen to accept camera ResourceName.
-  const BaseScreen({Key? key, required this.base, required this.resourceName, required this.camera, required this.streamClient})
+  const BaseScreen({Key? key, required this.base, required this.resourceName, required this.cameras, required this.robot})
       : super(key: key);
 
   @override
@@ -20,12 +21,10 @@ class BaseScreen extends StatelessWidget {
       ),
       iosContentPadding: true,
       body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-          children: [
-            CameraStreamView(camera: camera, streamClient: streamClient),
-            BaseJoystick(base: base),
-          ],
+        child: ViamBaseScreen(
+          base: base,
+          cameras: cameras,
+          robotClient: robot,
         ),
       ),
     );

example/viam_example_app/lib/screens/stream.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
 import 'package:image/image.dart' as img;
 import 'package:viam_sdk/viam_sdk.dart';
+import 'package:viam_sdk/widgets.dart';
 
 class StreamScreen extends StatefulWidget {
   final Camera camera;
@@ -81,7 +82,7 @@ class _StreamScreenState extends State<StreamScreen> {
               style: const TextStyle(fontWeight: FontWeight.w300),
             ),
             const SizedBox(height: 16),
-            CameraStreamView(camera: widget.camera, streamClient: widget.client),
+            ViamCameraStreamView(camera: widget.camera, streamClient: widget.client),
             const SizedBox(height: 16),
             if (_imgLoaded) Image.memory(Uint8List.view(imageBytes!.buffer), scale: 3),
             const SizedBox(height: 16),

lib/viam_sdk.dart

@@ -42,6 +42,3 @@ export 'src/rpc/dial.dart' hide AuthenticatedChannel;
 
 /// Misc
 export 'src/viam_sdk.dart';
-
-/// Widgets
-export 'src/widgets/widgets.dart';

lib/widgets.dart

@@ -0,0 +1,4 @@
+export 'widgets/button.dart';
+export 'widgets/camera_stream.dart';
+export 'widgets/joystick.dart';
+export 'widgets/resources/base.dart';

lib/widgets/button.dart

@@ -0,0 +1,146 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+
+enum ViamButtonRole {
+  primary,
+  inverse,
+  success,
+  danger,
+  warning;
+
+  Color get backgroundColor {
+    final brightness = SchedulerBinding.instance.platformDispatcher.platformBrightness;
+    final isDarkMode = brightness == Brightness.dark;
+    switch (this) {
+      case ViamButtonRole.primary:
+        return isDarkMode ? const Color.fromARGB(255, 40, 40, 41) : const Color.fromARGB(255, 240, 240, 240);
+      case ViamButtonRole.inverse:
+        return isDarkMode ? const Color.fromARGB(255, 240, 240, 240) : const Color.fromARGB(255, 40, 40, 41);
+      case ViamButtonRole.success:
+        return isDarkMode ? const Color.fromARGB(255, 105, 153, 103) : const Color.fromARGB(255, 61, 125, 63);
+      case ViamButtonRole.danger:
+        return isDarkMode ? const Color.fromARGB(255, 211, 103, 94) : const Color.fromARGB(255, 190, 53, 54);
+      case ViamButtonRole.warning:
+        return isDarkMode ? const Color.fromARGB(255, 250, 185, 82) : const Color.fromARGB(255, 242, 166, 0);
+    }
+  }
+
+  Color get foregroundColor {
+    final brightness = SchedulerBinding.instance.platformDispatcher.platformBrightness;
+    final isDarkMode = brightness == Brightness.dark;
+    switch (this) {
+      case ViamButtonRole.primary:
+        return isDarkMode ? const Color.fromARGB(255, 240, 240, 240) : const Color.fromARGB(255, 40, 40, 41);
+      case ViamButtonRole.inverse:
+        return isDarkMode ? const Color.fromARGB(255, 40, 40, 41) : const Color.fromARGB(255, 240, 240, 240);
+      case ViamButtonRole.success:
+        return const Color.fromARGB(255, 255, 255, 255);
+      case ViamButtonRole.danger:
+        return const Color.fromARGB(255, 255, 255, 255);
+      case ViamButtonRole.warning:
+        return const Color.fromARGB(255, 255, 255, 255);
+    }
+  }
+
+  MaterialColor get materialColor {
+    switch (this) {
+      case ViamButtonRole.primary:
+        return Colors.grey;
+      case ViamButtonRole.inverse:
+        return Colors.grey;
+      case ViamButtonRole.success:
+        return Colors.green;
+      case ViamButtonRole.danger:
+        return Colors.red;
+      case ViamButtonRole.warning:
+        return Colors.amber;
+    }
+  }
+
+  ButtonStyle get style =>
+      ButtonStyle(backgroundColor: MaterialStatePropertyAll(backgroundColor), foregroundColor: MaterialStatePropertyAll(foregroundColor));
+}
+
+enum ViamButtonStyle {
+  filled,
+  outline,
+  ghost;
+}
+
+enum ViamButtonVariant {
+  iconOnly,
+  iconLeading,
+  iconTrailing;
+}
+
+class ViamButton extends StatelessWidget {
+  final String text;
+  final VoidCallback onPressed;
+  final Widget? icon;
+  final ViamButtonRole role;
+  final ViamButtonStyle style;
+  final ViamButtonVariant variant;
+
+  const ViamButton(
+      {required this.onPressed,
+      required this.text,
+      super.key,
+      this.icon,
+      this.role = ViamButtonRole.primary,
+      this.style = ViamButtonStyle.filled,
+      this.variant = ViamButtonVariant.iconLeading});
+
+  ButtonStyle get _buttonStyle {
+    const mainStyle = ButtonStyle(splashFactory: NoSplash.splashFactory);
+
+    if (style == ViamButtonStyle.ghost) {
+      var fgColor = role.backgroundColor;
+      if (role == ViamButtonRole.primary || role == ViamButtonRole.inverse) {
+        fgColor = role.foregroundColor;
+      }
+      return mainStyle.copyWith(
+        backgroundColor: const MaterialStatePropertyAll(Color.fromARGB(0, 0, 0, 0)),
+        foregroundColor: MaterialStatePropertyAll(fgColor),
+      );
+    }
+    if (style == ViamButtonStyle.outline) {
+      var alpha = 25;
+      var fgColor = role.backgroundColor;
+      var outlineColor = role.backgroundColor;
+      if (role == ViamButtonRole.primary || role == ViamButtonRole.inverse) {
+        alpha = 0;
+        fgColor = role.foregroundColor;
+        outlineColor = role.foregroundColor;
+      }
+      return mainStyle.copyWith(
+        backgroundColor: MaterialStatePropertyAll(role.backgroundColor.withAlpha(alpha)),
+        foregroundColor: MaterialStatePropertyAll(fgColor),
+        side: MaterialStatePropertyAll(BorderSide(color: outlineColor)),
+      );
+    }
+    return mainStyle.copyWith(
+      backgroundColor: MaterialStatePropertyAll(role.backgroundColor),
+      foregroundColor: MaterialStatePropertyAll(role.foregroundColor),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Widget child;
+    if (icon != null) {
+      if (variant == ViamButtonVariant.iconOnly) {
+        child = IconButton(onPressed: onPressed, icon: icon!, style: _buttonStyle);
+      }
+      if (style == ViamButtonStyle.outline) {
+        child = OutlinedButton.icon(onPressed: onPressed, icon: icon!, label: Text(text), style: _buttonStyle);
+      }
+      child = TextButton.icon(onPressed: onPressed, icon: icon!, label: Text(text), style: _buttonStyle);
+    }
+    if (style == ViamButtonStyle.outline) {
+      child = OutlinedButton(onPressed: onPressed, style: _buttonStyle, child: Text(text));
+    }
+    child = TextButton(onPressed: onPressed, style: _buttonStyle, child: Text(text));
+
+    return Theme(data: ThemeData(primarySwatch: role.materialColor), child: child);
+  }
+}