update example

Author: hackw

README.md

@@ -875,6 +875,43 @@ class CirclePositionExampleState extends State<CirclePositionExample> {
 }
 ```
 
+7. margin [Flutter Web Online Example](https://constraintlayout.flutterfirst.cn)
+
+![margin.webp](https://github.com/hackware1993/flutter-constraintlayout/blob/master/margin.webp?raw=true)
+
+```dart
+class MarginExample extends StatelessWidget {
+  const MarginExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: ConstraintLayout(
+        children: [
+          Container(
+            color: const Color(0xFF005BBB),
+          ).applyConstraint(
+            size: 50,
+            topLeftTo: parent,
+            margin: const EdgeInsets.only(
+              left: 20,
+              top: 100,
+            ),
+          ),
+          Container(
+            color: const Color(0xFFFFD500),
+          ).applyConstraint(
+            size: 100,
+            top: sId(-1).bottom,
+            right: parent.right.margin(100),
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
+
 # Performance optimization
 
 1. When the layout is complex, if the child elements need to be repainted frequently, it is

example/home.dart

@@ -10,6 +10,7 @@ import 'dimension_ratio.dart';
 import 'grid.dart';
 import 'guideline.dart';
 import 'horizontal_list.dart';
+import 'margin.dart';
 import 'percentage_layout.dart';
 import 'relative_id.dart';
 import 'self_wrap_content.dart';
@@ -37,6 +38,7 @@ class ExampleHome extends StatelessWidget {
     'Staggered Grid': const StaggeredGridExample(),
     'Circle Position': const CirclePositionExample(),
     'Self wrapContent': const SelfWrapContentExample(),
+    'Margin': const MarginExample(),
     'Chain (Coming soon)': const ComingSoonWidget(),
   };
 

example/margin.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_constraintlayout/src/constraint_layout.dart';
+
+import 'custom_app_bar.dart';
+
+class MarginExample extends StatelessWidget {
+  const MarginExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: const CustomAppBar(
+        title: 'Margin',
+        codePath: 'example/margin.dart',
+      ),
+      body: ConstraintLayout(
+        children: [
+          Container(
+            color: const Color(0xFF005BBB),
+          ).applyConstraint(
+            size: 50,
+            topLeftTo: parent,
+            margin: const EdgeInsets.only(
+              left: 20,
+              top: 100,
+            ),
+          ),
+          Container(
+            color: const Color(0xFFFFD500),
+          ).applyConstraint(
+            size: 100,
+            top: sId(-1).bottom,
+            right: parent.right.margin(100),
+          ),
+        ],
+      ),
+    );
+  }
+}

margin.webp

@@ -36,4 +36,5 @@ flutter:
     - example/vertical_list.dart
     - example/staggered_grid.dart
     - example/circle_position.dart
-    - example/self_wrap_content.dart
+    - example/self_wrap_content.dart
+    - example/margin.dart