add circle position support

Author: fbchen

example/circle_position.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_constraintlayout/src/constraint_layout.dart';
+
+import 'custom_app_bar.dart';
+
+class CirclePositionExample extends StatelessWidget {
+  const CirclePositionExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: const CustomAppBar(
+        title: 'Circle Position',
+        codePath: 'example/circle_position.dart',
+      ),
+      body: ConstraintLayout(
+        children: [
+          Container(
+            color: Colors.redAccent,
+          ).applyConstraint(
+            width: 100,
+            height: 100,
+            centerTo: parent,
+          ),
+          for (int angle = 0; angle <= 360; angle += 15)
+            Container(
+              color: Colors.yellow,
+            ).applyConstraint(
+              width: 50,
+              height: 50,
+              centerTo: rId(0),
+              translate: circleTranslate(
+                radius: 300,
+                angle: angle,
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

example/home.dart

@@ -3,6 +3,7 @@ import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';
 
 import 'badge.dart';
 import 'barrier.dart';
+import 'circle_position.dart';
 import 'complex_list.dart';
 import 'dimension_ratio.dart';
 import 'grid.dart';
@@ -32,6 +33,7 @@ class ExampleHome extends StatelessWidget {
     'Horizontal List': const HorizontalListExample(),
     'Vertical List': const VerticalListExample(),
     'Staggered Grid': const StaggeredGridExample(),
+    'Circle Position': const CirclePositionExample(),
     'Chain (Coming soon)': null,
   };
 
@@ -58,7 +60,7 @@ class ExampleHome extends StatelessWidget {
             ),
             left: parent.left,
             top: rId(0).bottom,
-            itemCount: 13,
+            itemCount: keyList.length,
             columnCount: 1,
             itemWidth: matchParent,
             itemHeight: 40,

lib/src/constraint_layout.dart

@@ -1,5 +1,6 @@
 import 'dart:collection';
 import 'dart:convert';
+import 'dart:math';
 import 'dart:ui' as ui;
 import 'dart:ui';
 
@@ -92,6 +93,17 @@ class ConstraintLayout extends MultiChildRenderObjectWidget {
   }
 }
 
+Offset circleTranslate({
+  required double radius,
+  required int angle,
+}) {
+  assert(radius >= 0 && radius != double.infinity);
+  assert(angle >= 0 && angle <= 360);
+  double xTranslate = sin((angle / 180) * pi) * radius;
+  double yTranslate = -cos((angle / 180) * pi) * radius;
+  return Offset(xTranslate, yTranslate);
+}
+
 List<Widget> constraintGrid({
   required ConstraintId id,
   required _Align left,

pubspec.yaml

@@ -34,4 +34,5 @@ flutter:
     - example/grid.dart
     - example/horizontal_list.dart
     - example/vertical_list.dart
-    - example/staggered_grid.dart
+    - example/staggered_grid.dart
+    - example/circle_position.dart