accomodate different coordinate systems in ios and macos

Author: jwill

ios_platform_views_io_2025/acrings_native/common/ACRings.swift

@@ -5,6 +5,17 @@ struct ACRings: View {
     var percentExercise: Double = 0.50
     var percentStand: Double = 0.75
 
+    // iOS and MacOS have differing coordinate systems
+    // In iOS, 0,0 is top-left, whereas in MacOS, 0,0 is bottom right
+    // Also circles are draw with their center at 0,0 so they must
+    // be translated accordingly
+    var offsetX = 150.0
+    #if os(iOS)
+    var offsetY = 150.0
+    #elseif os(macOS)
+    var offsetY = -150.0
+    #endif
+
         var body: some View {
                 ZStack {
                     // background
@@ -29,7 +40,6 @@ struct ACRings: View {
                         .stroke(.blue, lineWidth: 20).frame(width: 100, height: 200)
 
 
-                }.rotationEffect(.degrees(-90))
-
+                }.rotationEffect(.degrees(-90)).offset(x:offsetX, y:offsetY)
             }
 }

ios_platform_views_io_2025/acrings_native/macos/Classes/ACRingsNativeViewFactory.swift

@@ -33,9 +33,8 @@ class NativeView: NSView {
         arguments args: Any?,
         binaryMessenger messenger: FlutterBinaryMessenger?
     ) {
-        super.init(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
-        wantsLayer = true
-        layer?.backgroundColor = NSColor.systemBlue.cgColor
+        super.init(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
+        //wantsLayer = true
         // macOS views can be created here
         createNativeView(view: self)
     }
@@ -45,6 +44,7 @@ class NativeView: NSView {
     }
 
     func createNativeView(view _view: NSView) {
-        window?.contentView = NSHostingView(rootView: ACRings())
+        let hostingView =  NSHostingView(rootView: ACRings())
+        self.addSubview(hostingView)
     }
 }

ios_platform_views_io_2025/lib/main.dart

@@ -52,7 +52,7 @@ class _MyHomePageState extends State<MyHomePage> {
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
-            SizedBox(height: 200, width: 0,
+            SizedBox(height: 300, width: 300,
             child:
             ActivityRings()),
             Text("Move", style: textTheme.displaySmall?.copyWith(color: Colors.red, fontWeight: FontWeight.bold),),