add relative id

Author: fbchen

example/home.dart

@@ -6,6 +6,7 @@ import 'complex_list.dart';
 import 'dimension_ratio.dart';
 import 'guideline.dart';
 import 'percentage_layout.dart';
+import 'relative_id.dart';
 import 'summary.dart';
 
 class ExampleHome extends StatelessWidget {
@@ -48,6 +49,9 @@ class ExampleHome extends StatelessWidget {
           button('DimensionRatio', () {
             push(context, const DimensionRatioExample());
           }),
+          button('Relative Id', () {
+            push(context, const RelativeIdExample());
+          }),
           button('Chain (Coming soon)', null),
           const Spacer(),
           const Text(

example/relative_id.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_constraintlayout/src/constraint_layout.dart';
+
+import 'custom_app_bar.dart';
+
+class RelativeIdExample extends StatelessWidget {
+  const RelativeIdExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: const CustomAppBar(
+        title: 'Relative Id',
+        codePath: 'example/relative_id.dart',
+      ),
+      body: ConstraintLayout(
+        children: [
+          Container(
+            color: Colors.yellow,
+          ).applyConstraint(
+            width: 200,
+            height: 200,
+            centerTo: parent,
+          ),
+          Container(
+            color: Colors.green,
+            child: const Text(
+              'Indeterminate badge size',
+              style: TextStyle(
+                color: Colors.black,
+                fontSize: 20,
+              ),
+            ),
+          ).applyConstraint(
+            left: rId(0).right,
+            bottom: rId(0).top,
+            translate: const Offset(-0.5, 0.5),
+            percentageTranslate: true,
+          ),
+          Container(
+            color: Colors.green,
+          ).applyConstraint(
+            width: 100,
+            height: 100,
+            left: rId(0).right,
+            right: rId(0).right,
+            top: rId(0).bottom,
+            bottom: rId(0).bottom,
+          )
+        ],
+      ),
+    );
+  }
+}

lib/src/constraint_layout.dart

@@ -413,6 +413,32 @@ class ConstraintId {
   }
 }
 
+class RelativeConstraintId extends ConstraintId {
+  final int childIndex;
+
+  RelativeConstraintId(this.childIndex) : super('child[$childIndex]');
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      super == other &&
+          other is RelativeConstraintId &&
+          runtimeType == other.runtimeType &&
+          childIndex == other.childIndex;
+
+  @override
+  int get hashCode => super.hashCode ^ childIndex.hashCode;
+
+  @override
+  String toString() {
+    return 'RelativeConstraintId{childIndex: $childIndex}';
+  }
+}
+
+ConstraintId rId(int childIndex) {
+  return RelativeConstraintId(childIndex);
+}
+
 class _Align {
   ConstraintId? id;
   _AlignType type;
@@ -1388,9 +1414,11 @@ class _ConstraintRenderBox extends RenderBox
 
     /// The id used by all constraints must be defined
     Set<ConstraintId> illegalIdSet = constraintsIdSet.difference(idSet);
-    if (illegalIdSet.isNotEmpty) {
+    Set<RelativeConstraintId> relativeIds =
+        illegalIdSet.whereType<RelativeConstraintId>().toSet();
+    if (relativeIds.length != illegalIdSet.length) {
       throw ConstraintLayoutException(
-          'These ids $illegalIdSet are not yet defined.');
+          'These ids ${illegalIdSet.difference(relativeIds)} are not yet defined.');
     }
 
     /// All ids referenced by Barrier must be defined
@@ -1536,8 +1564,7 @@ class _ConstraintRenderBox extends RenderBox
       childParentData._constrainedNodeMap = nodesMap;
 
       _ConstrainedNode currentNode = _getConstrainedNodeForChild(
-          childParentData.id ??
-              ConstraintId('child[$childIndex]@${child.runtimeType}'));
+          childParentData.id ?? RelativeConstraintId(childIndex));
       currentNode.parentData = childParentData;
       currentNode.index = childIndex;
       currentNode.renderBox = child;

pubspec.yaml

@@ -28,4 +28,5 @@ flutter:
     - example/guideline.dart
     - example/summary.dart
     - example/percentage_layout.dart
-    - example/dimension_ratio.dart
+    - example/dimension_ratio.dart
+    - example/relative_id.dart