add self wrapContent support

Author: fbchen

README.md

@@ -91,13 +91,13 @@ insult him.
     grid)
 17. circle position
 18. e-index(event dispatch order, default is z-index)
+19. self wrapContent
 
 Coming soon:
 
 1. chain
 2. constraints visualization
-3. self wrapContent
-4. more...
+3. more...
 
 Support platform:
 

example/home.dart

@@ -12,6 +12,7 @@ import 'guideline.dart';
 import 'horizontal_list.dart';
 import 'percentage_layout.dart';
 import 'relative_id.dart';
+import 'self_wrap_content.dart';
 import 'staggered_grid.dart';
 import 'summary.dart';
 import 'vertical_list.dart';
@@ -35,6 +36,7 @@ class ExampleHome extends StatelessWidget {
     'Vertical List': const VerticalListExample(),
     'Staggered Grid': const StaggeredGridExample(),
     'Circle Position': const CirclePositionExample(),
+    'Self wrapContent': const SelfWrapContentExample(),
     'Chain (Coming soon)': const ComingSoonWidget(),
   };
 

example/self_wrap_content.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_constraintlayout/src/constraint_layout.dart';
+
+import 'custom_app_bar.dart';
+
+class SelfWrapContentExample extends StatelessWidget {
+  const SelfWrapContentExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: const CustomAppBar(
+        title: 'Self wrapContent',
+        codePath: 'example/self_wrap_content.dart',
+      ),
+      body: Center(
+        child: ConstraintLayout(
+          width: wrapContent,
+          height: wrapContent,
+          children: [
+            Container(
+              color: Colors.blue,
+            ).applyConstraint(
+              width: matchParent,
+              height: matchParent,
+            ),
+            Container(
+              color: Colors.yellow,
+            ).applyConstraint(
+              width: 300,
+              height: 150,
+              topLeftTo: parent,
+              margin: const EdgeInsets.only(
+                top: 10,
+                left: 10,
+              ),
+            ),
+            Container(
+              color: Colors.orange,
+            ).applyConstraint(
+              width: 50,
+              height: 50,
+              topRightTo: parent,
+            ),
+            const Text(
+              'Self wrapContent',
+            ).applyConstraint(
+              outBottomRightTo: rId(1),
+              margin: const EdgeInsets.only(
+                left: 20,
+                right: 20,
+              ),
+            ),
+            Container(
+              color: Colors.cyan,
+            ).applyConstraint(
+              width: 50,
+              height: 50,
+              centerVerticalTo: parent,
+              left: rId(1).right,
+              right: rId(2).left,
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}